CSS Loader & Spinner Generator
Pick a pure-CSS loading animation from 31 styles across six groups — spinners, dots, bars, progress bars, pulses and playful shapes.
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); }
}Result: 13 lines, 336 charactersPick 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. Anything that is not a color keeps the default, and the field says so.
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.