Spinner components in Bootsrap - Performance & Optimization

Performance: Spinner components

MEDIUM IMPACT

Spinner components affect the page's interaction responsiveness and visual stability during loading or async operations.

Showing a loading spinner while waiting for data

Bootsrap

<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>

Uses Bootstrap's built-in CSS animation which runs on the compositor thread without layout thrashing.

📈 Performance GainSingle GPU-accelerated animation with minimal CPU usage and no forced reflows.

Showing a loading spinner while waiting for data

Bootsrap

<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><script>setInterval(() => { document.querySelector('.spinner-border').style.transform = `rotate(${Date.now() % 360}deg)`; }, 10);</script>

Using JavaScript to manually rotate the spinner triggers continuous style recalculations and layout updates.

📉 Performance CostTriggers multiple reflows and repaints every 10ms, causing high CPU usage and input lag.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
JS-driven spinner rotation	Minimal DOM nodes	Multiple reflows per frame (~100 per second)	High paint cost due to frequent style changes	[X] Bad
Bootstrap CSS spinner	Minimal DOM nodes	No reflows during animation	Low paint cost, GPU accelerated	[OK] Good

Rendering Pipeline

Spinner components rely on CSS animations that run on the compositor thread, avoiding layout and paint bottlenecks if implemented correctly.

→Style Calculation

→Composite

⚠️ BottleneckLayout and Paint if JavaScript triggers style changes frequently

Core Web Vital Affected

INP

Spinner components affect the page's interaction responsiveness and visual stability during loading or async operations.

Optimization Tips

1Use CSS animations with transform and opacity for spinners to avoid layout thrashing.

2Avoid JavaScript style updates for spinner rotation to prevent frequent reflows.

3Keep spinner DOM minimal and use built-in Bootstrap classes for best performance.

Performance Quiz - 3 Questions

Which spinner implementation is best for keeping the page responsive?

A An image spinner that reloads every second

B A CSS-only spinner using transform animations

C A spinner rotated by JavaScript updating styles every 10ms

D A spinner using heavy SVG filters animated by JS

DevTools: Performance

How to check: Record a performance profile while the spinner is active. Look for frequent style recalculations and layout events.

What to look for: High CPU usage spikes and many 'Recalculate Style' or 'Layout' events indicate poor spinner implementation.