100% offline
CSS
Free · no signup
Updated
CSS Loader Generator
A CSS Loader Generator builds a pure-CSS loading spinner — ring, dual ring, dots, bars, or pulse — from a single HTML element, outputting the rule and @keyframes ready to paste.
48px
5px
1.0s
CSS
.loader {
width: 48px;
height: 48px;
border: 5px solid #2a2a2a;
border-top-color: #f59e0b;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}About CSS Loader Generator
Choose a loader style and tune size, thickness, color, and speed; the preview is rendered from the exact CSS you copy, keyframes included. Every loader is deliberately a single element with no wrapper divs or extra spans, so it drops into any markup — including onto a pseudo-element — without touching your component structure. No JavaScript, no GIFs, no requests.
What CSS Loader Generator does
- Five styles: ring, dual ring, dots, bars, pulse
- Single-element markup — no wrapper divs
- Size, thickness, color, track, and speed controls
- Outputs the rule plus its @keyframes
- Preview rendered from the generated CSS itself
- No JavaScript and no image requests
When to reach for CSS Loader Generator
- Showing a spinner while data loads
- Adding a loading state to a button
- Placeholder animation for a skeleton screen
- Replacing a loading GIF with pure CSS
How to use CSS Loader Generator
- 01
Pick a style
Choose ring, dual ring, dots, bars, or pulse.
- 02
Tune it
Set size, thickness, color, and speed.
- 03
Copy the CSS
Copy the rule and keyframes into your stylesheet.
When to use CSS Loader Generator vs alternatives
| Alternative | Use CSS Loader Generator when… | Use the alternative when… |
|---|---|---|
| A loading GIF or animated SVG | you want no extra request, crisp scaling, and recoloring from CSS. | you need illustrated or branded animation. |
| A spinner from a UI library | you don't want a dependency for one animation. | you're already using that library's components. |
Frequently asked questions
Do these loaders need JavaScript?
No. Each one is a CSS rule plus @keyframes on a single element — no scripts and no image requests.
Why single-element loaders?
Because they paste in anywhere, including onto a ::before or ::after pseudo-element, without changing your markup or component structure.
Should a loader respect prefers-reduced-motion?
For decorative motion, yes. A loader's animation communicates state, so most teams keep it and simply slow it down — wrap the animation in a prefers-reduced-motion media query if you want to be strict.
How do I make the loader accessible?
Give the element role="status" and an aria-label, or pair it with visually hidden text, so screen readers announce that content is loading.