CSS Loader Generator
Design a loading indicator — spinner, dual ring, bouncing dots, equaliser bars, a pulse or an indeterminate progress bar — preview it live, and copy the CSS (with @keyframes) and the HTML.
Presets
Style
Colour
Dots & bars
Output
What Is a CSS Loader?
A small animated element that tells users something is happening.
A good loader is lightweight (pure CSS, no images or JS), predictable (a steady loop) and accessible (labelled as a status and respectful of prefers-reduced-motion).
Each type here is a different metaphor: a spinner/ring for general waiting, dots or bars for a livelier feel, a pulse for a subtle heartbeat, and a bar for indeterminate progress along a track.
The Parts of the Loader
What each generated rule does.
.loader
The element: sized box, accent/track colours and the animation shorthand that runs the loop.
@keyframes
The motion itself — a 360° turn, a scale/opacity pulse, a vertical stretch or a slide across the track.
Staggered children
Dots and bars use animation-delay per child so the wave reads left to right.
prefers-reduced-motion
Disables the animation for users who request reduced motion — accessibility built in.
How to Use the CSS Loader Generator
Get your result in under ten seconds.
Pick a type
Start from Spinner, Ring, Dots, Bars, Pulse or Bar.
Tune it
Set the size, thickness, colours and speed.
Copy
Switch between CSS and HTML and copy the loader.
Why Use the CSS Loader Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Six loaders
Spinner, ring, dots, bars, pulse and progress bar from one panel.
Pure CSS
No images, no JavaScript — just keyframes.
Accessible
Labelled as a status and honours prefers-reduced-motion.
Colour formats
Output colours as RGB, HEX or HSL.
Responsive
Scales cleanly at any size.
Private
Runs entirely in your browser — nothing is uploaded.
Frequently Asked Questions
Give it a transparent top border: border-top-color: transparent makes the rotating ring read as an arc.
Apply the same keyframes to each dot but offset them with animation-delay — the generator staggers them automatically.
600–900ms is a calm default for spinners; dots and bars often look good a touch faster.
Yes — the copied CSS includes a @media (prefers-reduced-motion: reduce) block that stops the animation.
For a simple spinner use Tailwind's built-in animate-spin; custom keyframes like these need a small config entry, so the generator gives you plain CSS you can drop in anywhere.
Only in your own browser (local storage). Press Reset to clear it.