Spin animation (loading) in Tailwind - Browser Rendering Trace

Render Flow - Spin animation (loading)

[Read HTML element with class 'animate-spin'] -> [Parse Tailwind CSS] -> [Match 'animate-spin' to keyframes] -> [Apply CSS animation properties] -> [Browser starts animation loop] -> [Repaint frames continuously]

The browser reads the HTML with the Tailwind class 'animate-spin', applies the corresponding CSS animation, and continuously repaints the element to show the spinning effect.

Render Steps - 3 Steps

Code Added:<div class="w-16 h-16 border-4 border-blue-500 rounded-full" aria-label="Loading spinner"></div>

Before

→

After

 ________ 
|        |
|        |
|  [ ]   |
|        |
|________|

(Blue circle with thick border, no spin yet)

Adding a div with width and height 4rem (16x16 Tailwind units), a 4px blue border, and rounded-full creates a blue circle shape.

🔧 Browser Action:Creates DOM node and applies static styles, triggers layout and paint.

Code Sample

A blue circular border with a transparent top border spins continuously to indicate loading.

Tailwind

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

Tailwind

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see in the spinner?

A The top border becomes transparent, creating a gap in the circle

B The spinner starts rotating continuously

C The spinner changes color to red

D The spinner disappears

Common Confusions - 3 Topics

Why doesn't the spinner spin if I forget 'animate-spin'?

Without 'animate-spin', the element is static. The rotation animation is only triggered by the 'animate-spin' class which applies the CSS animation.

💡 Animation classes must be present to see motion; static styles alone don't animate.

Why does the spinner look like a full circle and not spin?

If the top border is not transparent, the spinner looks like a solid ring and the rotation is less visible. The transparent top border creates a visual gap that makes spinning obvious.

💡 Use 'border-t-transparent' to create a visible spinning effect.

Why is the spinner size not changing when I adjust width and height?

Tailwind's width and height classes set fixed sizes. Make sure you use matching width and height classes (e.g., w-16 and h-16) to keep the spinner circular and sized correctly.

💡 Width and height must be equal for a perfect circle spinner.

Property Reference

Property	Value Applied	Effect	Common Use
animation	spin 1s linear infinite	Rotates element 360 degrees continuously	Loading spinners, rotating icons
border-t-transparent	transparent	Makes top border invisible to create a visual gap	Highlighting rotation effect
border-4	4px solid	Sets border thickness	Defines spinner thickness
rounded-full	50% border-radius	Makes element circular	Creating round shapes

Concept Snapshot

Spin animation uses CSS animation to rotate an element continuously. Tailwind's 'animate-spin' applies a 1s linear infinite rotation. A transparent top border ('border-t-transparent') creates a visible gap. Equal width and height with 'rounded-full' make a circular spinner. This creates a simple, accessible loading indicator.