CSS Loader Generator
Choose a loader shape, tune its size, color, speed, and stroke or gap, then copy an accessible loading-status pattern for your interface.
Controls the spinner stroke width.
Stops the animation and shows one stable loading shape.
LIVE PREVIEW
Spinner loader
The animation is decorative in this preview. In a product, pair it with a stable, concise loading status.
A QUICK WALKTHROUGH
How to use this tool
- Choose Spinner, Dots, or Bars, then set its size, color, speed, and detail value.
- Inspect the animated preview and turn on Preview reduced motion to see its stable alternative.
- Copy the HTML and CSS, then use a concise loading name that changes only when the actual loading state changes.
Three original CSS-only loader patterns
Spinner uses a rotating bordered circle, Dots uses three scaling circles, and Bars uses three vertically scaling rounded bars. Each pattern is generated from standard CSS without an image, SVG, canvas, font file, external stylesheet, or runtime request. The preview and code remain entirely in this browser.
Motion is optional, status text is deliberate
The generated CSS includes a prefers-reduced-motion rule that stops animation and presents a stable shape. The generated HTML gives the loader role=status and an accessible name, but do not update that name every animation frame or use a live region for decorative motion. Announce concise state changes such as “Loading results” or “Results loaded” once when the real operation begins or finishes.
GOOD TO KNOW
Common questions
Does the loader announce every animation cycle?
No. The animation is decorative. role=status supplies a polite live-region boundary for meaningful loading-state text, so the text should remain stable during animation and change only when the actual task state changes.
Why include a reduced-motion rule?
Some people request less motion at the operating-system level. The CSS stops the animation for that preference and preserves a recognizable static loading shape.
Can I use the code for a long-running task?
Yes, but pair it with progress, an estimate, a cancel action, or a clear completion message when the task is long enough that a generic spinner does not explain what is happening.