Loader Generator
Every generated snippet includes role="status", a screen-reader-only "Loading…" label, and a prefers-reduced-motion block that stops the animation.
Generate a CSS loading spinner that includes accessibility markup by default — role="status", a screen-reader-only "Loading…" label, and a prefers-reduced-motion block that stops the animation — instead of leaving it up to you (a well-known competitor's output, checked directly, is a bare <div class="spinner"></div> with none of that).
How it works
- Pick a spinner style, color, size, and speed — the preview updates live
- The generated code includes role="status" + a hidden label and a prefers-reduced-motion block by default
- Copy the HTML + CSS and paste it directly into your project
Frequently asked questions
Why does the code include role="status"?
It's the way screen reader users find out something is loading at all — without it, the page just goes silent while a div spins, with no indication anything is happening.
What's prefers-reduced-motion for?
It detects whether a user has turned on "reduce motion" in their OS settings. Spinning and pulsing animations can cause real physical discomfort for people with vestibular disorders, so this tool's output stops the animation when that preference is set.
Is the code sent to a server?
No — generation runs entirely in your browser.
Related tools
From the blog
Update history
- 2026-08-30 Added: a cover image (a ring spinner mid-rotation, a crossed-out ear/sound-wave icon for screen-reader silence, and a headphone+ear icon with a checkmark speech bubble for an accessible announcement) — used as the card thumbnail, social share image, and blog title image.
- 2026-08-30 Fixed: the live preview rendered nothing — a literal <style> tag in the Astro template body was being extracted into Astro's build-time scoped-CSS system instead of staying a live DOM node, so the runtime script's null-check guard silently skipped rendering. Now injects the <style> tag via innerHTML at runtime instead.
- 2026-08-30 Launched: live CSS loader generator (no button) — 5 spinner styles with color/size/speed controls, generating accessible markup by default (role="status", hidden "Loading…" label, prefers-reduced-motion guard), verified against a popular competitor's bare, non-accessible output. Entirely client-side.