How to use the CSS Loader Generator
- 1. Pick a styleSpinning ring, dual ring, bouncing dots, equaliser bars, pulse, progress bar or skeleton shimmer.
- 2. Set the lookChoose colour, size, thickness and speed, and watch the live preview.
- 3. Copy the codeCopy the HTML and CSS, or download a ready-to-open HTML file.
Why pure CSS loaders
A loader made from a single element and a few lines of CSS weighs a few hundred bytes, scales sharply to any size, and changes colour with one value. GIF spinners are heavier, blurry on high-density screens and can't follow your theme. Each loader here animates only transform, opacity or a background position, so it keeps spinning smoothly even while the page is busy. Your code is processed in your browser and never uploaded.
Accessibility is built in. The loader has role="status" (or progressbar for the bar) and aria-label="Loading", so screen readers announce it. With Slow down for reduced-motion users ticked, a media query makes the animation three times slower for people who have asked their device for less motion, instead of stopping it, so they still see that something is happening.
Worked example
The default is a Spinning ring, 48px, 5px thick, one turn per second in Uncodemy orange #ff5421. The CSS gives .loader a 5px solid rgba(255, 84, 33, 0.2) border, a solid #ff5421 top border, border-radius: 50% and animation: loader-spin 1s linear infinite, with keyframes rotating to 360deg. The reduced-motion block sets the duration to 3s.
Tips
- Show a loader only after about 300 ms; very fast loads look smoother without a flash of spinner.
- Skeleton shimmers suit content areas such as cards and lists, because they hint at the layout to come.
- Remove the loader, or set
hidden, as soon as loading finishes, so screen readers stop announcing it.
Frequently asked questions
Do I need JavaScript?
Only to show and hide the loader while your data loads; the animation itself is pure CSS.
Can I use several loaders on one page?
Yes. Rename the .loader class in the copied code if you need different styles side by side.
Is the CSS loader generator free?
Yes. You can open the CSS loader generator, paste code and change every setting without signing up. When you get the HTML and CSS for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.