Spin animation (loading) in Tailwind - Performance & Optimization

Performance: Spin animation (loading)

MEDIUM IMPACT

Spin animations affect the browser's paint and composite stages, impacting smoothness and interaction responsiveness.

Creating a loading spinner animation

Tailwind

<svg class="animate-spin w-12 h-12 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M4 12a8 8 0 018-8"/></svg>

SVG spin uses vector graphics with fewer paint areas and leverages GPU compositing efficiently.

📈 Performance GainReduces paint cost and GPU load, resulting in smoother animation and better input responsiveness.

Creating a loading spinner animation

Tailwind

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

Using a heavy border animation triggers continuous paint and composite layers, increasing GPU load.

📉 Performance CostTriggers continuous paint and composite, increasing CPU/GPU usage and can cause jank on low-end devices.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Border-based spin animation	Minimal (1 element)	0	High (continuous repaint)	[X] Bad
SVG spin animation	Minimal (1 element)	0	Low (mostly compositing)	[OK] Good

Rendering Pipeline

Spin animations cause the browser to repeatedly update the paint and composite stages to show rotation. The style calculation is minimal since Tailwind's animate-spin uses CSS keyframes. The main cost is in paint and composite layers.

→Paint

→Composite

⚠️ BottleneckPaint stage is most expensive due to continuous redrawing of the spinner's visible parts.

Core Web Vital Affected

INP

Spin animations affect the browser's paint and composite stages, impacting smoothness and interaction responsiveness.

Optimization Tips

1Use transform: rotate() for spin animations to leverage GPU compositing.

2Prefer SVG spinners over border-based CSS spinners to reduce paint cost.

3Avoid animating properties that trigger layout or paint to keep animations smooth.

Performance Quiz - 3 Questions

Which CSS property is best for smooth spin animations with minimal paint cost?

A width

B border-color

C transform: rotate()

D box-shadow

DevTools: Performance

How to check: Record a performance profile while the spinner runs. Look at the 'Paint' and 'Composite Layers' sections to see how much time is spent repainting and compositing.

What to look for: High paint times and frequent composite layers indicate costly animations. Lower paint and mostly composite layers indicate efficient GPU usage.