About Loading Spinner Generator

Generate CSS-only loading spinners and progress indicators. Part of the DevTools Surf developer suite. Browse more tools in the Animation / CSS collection.

Use Cases

• Frontend developers adding loading states to async operations
• UI designers creating branded spinner components
• Mobile web developers building lightweight loading indicators
• Component library authors providing accessible spinner primitives

Tips

• Keep spinner size proportional to the content area it covers
• Use CSS custom properties for easy theme color changes
• Add aria-label for screen reader accessibility on spinners

Fun Facts

• The spinning loading indicator was popularized by Apple's macOS 'spinning beach ball' (officially the 'spinning wait cursor'), which first appeared in Mac OS X 10.0 in 2001.
• Research by Nielsen Norman Group found that users perceive a delay as acceptable under 1 second — spinners should appear after 1 second and be replaced by skeleton screens after 2-3 seconds.
• CSS-only spinners became practical after CSS3 animations shipped in all major browsers around 2012-2013, eliminating the need for animated GIF spinners that were common since the 1990s.

FAQ

CSS-only or does it need JS?

Pure CSS via @keyframes. No JavaScript needed. Drop the HTML + CSS and it just spins.

What shapes?

Classic circle, dots, bars, pulse, bouncing dots, spinning square. 15+ variants with live preview.

Is it accessible?

Add `aria-label="Loading"` and `role="status"` (the tool generates these). For screen readers, a visible or SR-only 'Loading...' text is best practice.

Can I customize colors?

Yes — CSS custom properties for all colors. Multi-color spinners (segmented rings) have variable per-segment colors.