CSS Loader Generator
Generate pure-CSS loading spinners and loaders. Pick a loader type, tweak color, size, and animation speed, see a live preview, and copy the ready-to-paste HTML/CSS.
About the CSS Loader Generator
This tool generates pure-CSS loading spinners — no images, no JavaScript. Choose from six common loader styles, customize the color, size, and animation duration, and copy the combined HTML/CSS to drop into your project.
Loader types
- Ring spinner — A rotating ring with a transparent gap (the classic "loading" spinner).
- Dual ring — Two concentric rings spinning in opposite directions.
- Three dots — Three bouncing dots, great for chat-style loaders.
- Five bars — Five vertical bars scaling up and down (equalizer style).
- Pulse — A single circle that pulses in and out.
- Ripple — A circle with an expanding ripple emanating outward.
How to use
- Pick a Loader type.
- Choose the Color (and Secondary color for dual ring / bars).
- Adjust Size and Animation duration with the sliders.
- Click Copy HTML to copy the full HTML + CSS block, or Copy CSS Only for just the stylesheet rules.
- Paste into your HTML file or stylesheet.
Frequently asked questions
Are these loaders accessible? They are decorative. When using a loader to indicate a loading state, also include a visually-hidden text label (e.g., <span class="sr-only">Loading…</span>) and use prefers-reduced-motion to disable animation for users who request it.
Do they work in all browsers? Yes — they only use standard CSS (transform, animation, border-radius, opacity). They work in all modern browsers and degrade gracefully to a static shape if animation is unsupported.
Can I make the loader responsive? The generated code uses pixel sizes for predictability. To make it scale, wrap the loader in a container and use transform: scale() at your breakpoints, or convert the pixel values to em / rem.