~/css/loader-generator
CSS Loader Generator
Design a pure CSS loader and copy it in one go: pick a ring, bouncing dots, equalizer bars or a pulse, then set the colour, size, line thickness and speed. The markup includes an accessible label and a reduced-motion rule.
Using the CSS Loader Generator
Choosing a loader
A ring spinner suits short, unknown waits such as a button submitting. Dots read as "someone is typing" and fit chat interfaces. Bars feel like audio and media. A pulse works as a quiet live indicator. If you know how much is left, a progress bar is better than any spinner.
Accessible loaders
A spinning shape means nothing to a screen reader. The generated markup adds role="status" and a hidden "Loading" label, so assistive technology announces that something is happening.
Smooth animation
Every loader animates only transform and opacity. The browser can run those on the GPU without recalculating layout, so the loader stays smooth even while the page is busy loading the thing you are waiting for.
Reduced motion
Some visitors set their system to reduce motion because animation makes them feel unwell. The CSS includes a prefers-reduced-motion rule that slows the loader right down instead of removing feedback altogether.
Showing and hiding the loader
Insert the loader when a request starts and remove it, or replace it with the content, as soon as the request finishes. If a request usually takes under half a second, wait around 300 milliseconds before showing the loader at all, so fast responses do not flash a spinner on screen for a split second.
Frequently asked questions
Is a CSS loader lighter than a GIF?
Much lighter: a few hundred bytes instead of kilobytes, sharp at every size, and recolourable with one variable.
Can I put the loader inside a button?
Yes. Set the size to around 16 to 20 pixels and use the button's text colour. Lock the button width while loading so it does not change size.
Where can I find more loaders?
The CSS loaders collection has eight hand-coded designs, including skeletons and a progress ring.