CSS Loader Generator
Tune size, duration and color; rings have separate track/accent colors and thickness. Preview and export use the same markup and CSS.
13 fixed patterns. Each preset shows only its relevant color, stroke, gap or ring controls.
Controls the spinner or ripple stroke width.
Stops motion for this preview. Exported CSS also respects the system reduced-motion preference.
Thickness is limited to 1–12px and at most one-sixth of the size.
LIVE PREVIEW
Spinner
The preview is decorative. In a product, pair it with a stable, concise loading status.
A QUICK WALKTHROUGH
How to use this tool
- Choose one of 13 loader presets, including the original spinner, dots, bars, ring and dual ring.
- Adjust size, duration, colors and the preset’s line, gap or ring thickness.
- Compare normal and reduced motion, then copy HTML and CSS.
Controls and limits
Size: 24–96px; duration: 0.4–3s; spinner/ripple stroke and dots, bars, grid or wave gap: 2–12px. Ring thickness: 1–12px, capped at one-sixth of size. Only relevant controls are displayed. Colors accept six-digit hex values only. Multi-shape presets use size to scale shapes or height; their total width also includes gaps.
Preview and export
The preview renders the exact exported HTML and CSS in an isolated style root. Ring and dual ring use independent track and accent colors; the other 11 presets use one color. Pulse changes size and opacity, ripple expands rings, grid pulses nine squares, orbit circles a center, flip turns a square, chase cycles six dots, bounce alternates two circles, and wave scales five bars. Fixed patterns accept no user HTML or CSS. Everything is generated locally.
Accessible motion
Exported HTML has role="status" and a localized loading label. CSS respects prefers-reduced-motion, including pseudo-elements. Keep a stable loading message and update it only when the task state changes.
GOOD TO KNOW
Common questions
Do I need JavaScript for the exported loader?
No. The copied loader uses HTML and CSS only.
Does reduced motion remove the status?
No. It stops animation and retains a recognizable static loading shape and status label.
Is anything uploaded?
No. Settings, preview and code generation stay in your browser.