The CSS Loader Generator creates pure-CSS loading spinners you can drop into any project. Choose a style — ring, dual ring, spinner, pulse, ping, or flip — adjust the size, colour, and speed, watch it animate live, and copy the complete CSS. Every loader is a single element, so the markup is just one div.
Because these loaders are pure CSS, they need no images, SVGs, or JavaScript, stay crisp at any size, and add almost nothing to your page weight. Everything runs in your browser.
How to use the CSS loader generator
- Pick a loader style from the library and watch it animate in the preview.
- Adjust the size, colour, and speed to match your design.
- Copy the generated CSS into your stylesheet.
- Add the markup <div class="loader"></div> where you want the loader to appear.
Pure-CSS loaders
Each loader here is built from a single element styled with borders, gradients, or a mask, and animated with @keyframes — no extra HTML, images, or scripts. The ring and dual-ring styles use a circular border with one or two visible arcs; the spinner uses a conic-gradient masked into a ring for a smooth fade; and pulse, ping, and flip animate scale, opacity, or 3D rotation. This keeps them lightweight and infinitely scalable.
Size, colour, and speed
The size sets the loader’s width and height (and its stroke thickness scales with it), the colour sets the accent, and the speed sets how long one cycle takes — smaller values spin faster. A duration around 1 second reads as smooth and calm; much faster can feel frantic, and much slower can look stalled. Match the loader’s colour to your brand or to the surrounding text for a cohesive look.
Using the loader accessibly
A spinner is decorative on its own, so screen-reader users need a text cue. Wrap or accompany the loader with a visually hidden “Loading…” label, or put role="status" and an aria-label on the container so assistive tech announces that content is loading. Remember to remove or hide the loader once the content arrives, and consider respecting prefers-reduced-motion for users who are sensitive to animation.
Frequently Asked Questions
How do I add the loader to my page?
Copy the generated CSS into your stylesheet, then add the element <div class="loader"></div> where you want it. All the styles and animation target the .loader class.
Do these loaders need JavaScript or images?
No. They are pure CSS — a single element animated with @keyframes. There are no images, SVGs, or scripts, which keeps them lightweight and sharp at any size.
How do I change the loader speed?
Use the Speed control. It sets the animation duration in seconds — smaller values make the loader spin or pulse faster, larger values slow it down.
How do I make the loader accessible?
Add a visually hidden “Loading…” text or set role="status" with an aria-label on the loader’s container so screen readers announce that content is loading, and hide the loader once it finishes.
Why is there no Tailwind output?
These loaders rely on custom @keyframes, which Tailwind expects to be registered in your config, so there is no clean one-line class. Copy the CSS into your global stylesheet and it works as-is.
Do these CSS loaders work in all browsers?
Yes. They use widely supported features — borders, gradients, masks, transforms, and animations — so they work in all modern browsers.