How to use the css loader and spinner generator
- Choose a style. Pick a spinning ring, a dual ring, bouncing dots, bars, a pulse or an indeterminate progress line.
- Set colour and size. Match the loader to your brand colour and set its size and line thickness. The track colour is the faint ring or line behind the moving part.
- Adjust the speed. The duration is the time for one full cycle. Around one second feels responsive without being frantic.
- Copy the code. Copy the HTML and CSS together. The class name is
.loader; rename it if it clashes with something in your project.
Why use a CSS loader?
A CSS loader is a few hundred bytes, needs no image or animation library, renders instantly and stays sharp at any size. The animations here only change transform and opacity, which browsers can run on the graphics card, so they stay smooth even while the page is busy loading.
Accessibility
Screen readers can’t see a spinning shape, so each loader has role="status" and an aria-label of “Loading”, which is announced when it appears. The CSS also includes a prefers-reduced-motion rule that slows the animation for people who turn off motion in their operating system settings.
When to show a loader
For waits shorter than about a second, a loader can make things feel slower, so consider showing it only after a short delay. For longer, predictable tasks such as uploads, a real progress bar showing the percentage done is more reassuring than an endless spinner.
Frequently asked questions
Do these loaders need JavaScript?
No. They’re pure HTML and CSS. Use your own code to show and hide them while content loads.
How do I centre the loader?
Put it inside a container with display: grid and place-items: center, or use margin: auto on the loader inside a flex container.
Will the animation drain battery?
CSS transform animations are efficient, but hide loaders when they’re not needed rather than leaving them running off screen.