Spin animation (loading) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What Tailwind CSS class creates a spin animation?

The <code>animate-spin</code> class applies a continuous spinning animation to an element.

intermediate

How do you make a spinner accessible for screen readers?

Add role="status" and include visually hidden text like <span class="sr-only">Loading...</span> to inform screen reader users.

beginner

Which HTML element is best to use for a spinner icon?

Use a semantic element like <svg> or <div> with proper ARIA roles, not decorative images without meaning.

beginner

How can you control the size of a spinner in Tailwind?

Use width and height classes like w-8 h-8 to set the spinner size responsively.

intermediate

Why is it important to use semantic HTML and ARIA roles with loading animations?

It helps users with disabilities understand the page state, improving accessibility and user experience.

Which Tailwind class adds a spinning animation to an element?

A loading-spin

B spin-animation

C animate-spin

D spin-effect

The correct Tailwind class for spinning animation is animate-spin.

What role attribute should you add to a spinner for accessibility?

A role="button"

B role="status"

C role="img"

D role="presentation"

Use role="status" to indicate a live region for loading status.

Which Tailwind classes control the size of a spinner?

A w-8 h-8

B bg-blue-500

C p-4 m-4

D text-lg text-bold

Width and height classes like w-8 h-8 set the spinner size.

What is the purpose of adding <span class="sr-only">Loading...</span> inside a spinner?

A To provide screen reader text

B To add color

C To show text visually

D To add animation

The sr-only class hides text visually but makes it available to screen readers.

Which HTML element is recommended for a spinner icon?

A <code>&lt;marquee&gt;</code>

B <code>&lt;img&gt;</code> without alt

C <code>&lt;table&gt;</code>

D <code>&lt;svg&gt;</code>

<svg> is semantic and scalable for spinner icons.

Explain how to create an accessible spinning loader using Tailwind CSS.

Think about animation, accessibility roles, and size control.

Describe why accessibility is important when adding loading animations on a webpage.

Consider users who cannot see the animation.