CSS Loader & Spinner Generator
Generate a pure-CSS loading spinner from 31 styles — ring, dots, bars, ripple, orbit, coin flip and more — with live preview and copy-paste CSS. No JavaScript.
Live preview
/* HTML: <div class="loader"></div> */
.loader {
width: 48px;
height: 48px;
box-sizing: border-box;
border: 5px solid color-mix(in srgb, #6c5ce7 22%, transparent);
border-top-color: #6c5ce7;
border-radius: 50%;
animation: loader-rotate 1s linear infinite;
}
@keyframes loader-rotate {
to { transform: rotate(360deg); }
}🔒 Generated in your browser — nothing is uploaded.
Pick a loader, then dial it in
The picker holds six groups — spinners, dots, bars, progress indicators, pulses, and shapes and
objects — and every one of them produces the same thing: a block of CSS that animates a single
<div class="loader"></div>. The live preview updates as you drag each slider, so you
can dial in exactly the spinner you want before you copy anything.
Pure CSS, no JavaScript
Every loader is drawn with CSS @keyframes and a single element — no images, no
SVG, no JavaScript, no external library. Paste the CSS into your stylesheet and drop the
<div class="loader"></div> anywhere you need a loading indicator.
What each group is for
Spinners — a ring, a dual ring, a blade, a ring segment, a dashed ring, an orbit, a gear, a pinwheel: the default choice, and the one people recognise as "loading". Dots and pulses read as gentler and suit a small inline slot. Bars — an equaliser, a signal — imply activity rather than waiting. Progress is the group to reach for when you know how far along you are: a bar, a striped bar, a pie, a donut, a battery. Shapes and objects are the playful ones. The loaders drawn from a border — the rings, the bars — respond to the thickness slider; all of them respond to size, colour and speed.
Frequently asked questions
Do I need JavaScript to use these loaders?
No. Each loader is 100% CSS — a single element plus @keyframes. Copy the CSS into your stylesheet and add <div class="loader"></div> where you want it.
How do I change the loader color?
Use the color picker or type any CSS color (hex, rgb(), or a named color) in the field beside it. The color updates live and is written straight into the CSS.
What do the size, speed and thickness controls do?
Size sets the loader box in pixels, speed sets the animation duration in seconds (lower is faster), and thickness sets the border, bar or hand width on the kinds that are drawn from one — the ring styles, bars, ripple, clock, orbit, the progress bars, donut, battery, gear and signal. On a kind that ignores thickness the slider is disabled, and the tool says so underneath it.
Is my design uploaded anywhere?
No. The CSS is generated entirely in your browser — nothing is sent to a server, so it works offline and stays private.