Spin animation (loading) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will you see when this Tailwind spinner runs?

Look at this HTML snippet using Tailwind CSS. What is the visual result in the browser?

Tailwind

<div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" aria-label="Loading spinner"></div>

A A static blue circle with no animation.

B A blue circle with a transparent top border that spins continuously.

C A blue square that fades in and out repeatedly.

D A blue circle that grows and shrinks but does not spin.

💡 Hint

The class 'animate-spin' makes the element rotate continuously.

The element is a circle with a blue border except the top border is transparent. The 'animate-spin' class makes it rotate, creating a spinner effect.

❓ selector

intermediate

Which Tailwind class controls the speed of the spin animation?

You want to make the spinner spin slower. Which class should you add or change?

Tailwind

<div class="w-10 h-10 border-4 border-green-600 border-t-transparent rounded-full animate-spin" aria-label="Loading spinner"></div>

A animate-spin-slow

B animate-spin duration-1000

C spin-speed-2

D duration-1000

💡 Hint

Tailwind uses 'duration-' classes to control animation speed.

The 'animate-spin' class triggers the spin animation. Adding 'duration-1000' sets the animation duration to 1000ms (1 second), slowing the spin.

🧠 Conceptual

advanced

Why is the top border made transparent in a Tailwind spinner?

Consider this spinner: border-4 border-blue-500 border-t-transparent rounded-full animate-spin. Why is the top border transparent?

A To create a visual gap that makes the spinning motion visible.

B To reduce the spinner's size visually.

C To disable the spinner's animation.

D To make the spinner fade in and out.

💡 Hint

Think about how a spinning circle looks if all borders are the same color.

Making the top border transparent creates a gap in the circle's border. When the circle spins, this gap moves, making the rotation visible as a loading spinner.

❓ layout

advanced

How to center a Tailwind spinner both vertically and horizontally?

You want to place the spinner exactly in the center of the page. Which container class setup achieves this?

Tailwind

<div class="???">
  <div class="w-16 h-16 border-4 border-purple-600 border-t-transparent rounded-full animate-spin" aria-label="Loading spinner"></div>
</div>

A flex items-center justify-center min-h-screen

B grid place-items-start min-h-screen

C block mx-auto my-auto min-h-screen

D inline-flex items-start justify-center min-h-screen

💡 Hint

Flexbox with 'items-center' and 'justify-center' centers content both ways.

Using 'flex' makes the container a flexbox. 'items-center' centers vertically, 'justify-center' centers horizontally. 'min-h-screen' ensures full viewport height.

❓ accessibility

expert

What is the best ARIA attribute to make a spinner accessible?

You have a spinner element. Which ARIA attribute best informs screen readers that loading is in progress?

Tailwind

<div class="w-12 h-12 border-4 border-red-500 border-t-transparent rounded-full animate-spin" ???></div>

A aria-hidden="true"

B aria-live="off"

C aria-label="Loading content" role="status"

D role="presentation"

💡 Hint

Use a role that announces status changes and a label describing the spinner.

The 'role="status"' tells screen readers this is a live status update. 'aria-label' describes the spinner's purpose. This combination makes loading state clear.