CSS Loader Generator
Pick a style, then set its size, colour and speed. Copy the small HTML snippet and the CSS that goes with it.
About CSS Loader Generator
A loading animation tells people that something is happening and the page has not stopped working. These four loaders are drawn with CSS alone, so there is no image or script to load, and each can be recoloured and resized by changing a few values. They are small enough to place inside a button or a card.
Pick a style, then set its size, colour and the time one cycle takes. The ring also has an adjustable thickness. The HTML marks the loader as a status with a label for screen readers, and the optional reduced motion rule slows the animation right down for visitors who have asked for less movement.
How to use CSS Loader Generator
- Choose a loader style.
- Set the size, colour and the seconds one cycle takes.
- Switch the reduced motion option on or off.
- Copy the HTML and the CSS.
Common uses
- Showing progress while data loads
- Adding a spinner inside a submit button
- Placeholder animation for a card or a page
- Matching a loader to brand colours
Frequently asked questions
How do screen readers handle the loader?
The HTML has role="status" and an aria-label saying Loading, so assistive software announces it. Remove the loader from the page when the content arrives.
What does the reduced motion option do?
It adds a media query that makes the animation four times slower for visitors who have asked their system for less motion. The loader is still there, but it is calmer.
How long should a loader be shown?
Only show one when the wait is likely to be longer than about a second. Very short waits feel faster without one, because a flash of animation draws attention to the delay.
Can I use more than one loader on a page?
Yes. The class is called loader in all four, so rename it if you want different styles on the same page.