About the CSS Loader Generator
A loading indicator reassures visitors that something is happening while content loads. The CSS Loader Generator offers a collection of pure CSS spinners and loading animations, including a classic spinner, dual ring, pulse, dots, bars, flipping square, ripple and bounce.
Because they use only one HTML element and a few lines of CSS, these loaders are tiny, load instantly, scale perfectly on high-resolution screens and need no images, GIFs or JavaScript libraries. Customize the color to match your brand, adjust the size and speed, then copy the HTML and CSS into your project.
Using a loader the right way
A loader should appear only while something is actually loading, and it should be easy to remove. A simple pattern:
<div class="loading-box">
<div class="loader" role="status" aria-label="Loading"></div>
</div>
.loading-box {
display: grid;
place-items: center;
min-height: 200px;
}Remove the loader, or the whole box, with JavaScript when your data arrives.
Good practice
- Add an accessible label.
role="status"andaria-label="Loading"tell screen-reader users what is happening. - Do not show it for very short waits. If loading usually takes less than about half a second, a spinner that flashes on and off feels slower than no spinner.
- Respect reduced motion. Some people turn off animations in their system settings. Slow down or stop the animation for them:
@media (prefers-reduced-motion: reduce) {
.loader { animation-duration: 3s; }
}- Match your brand colour and keep the size modest. 40–48px is usually enough for a page section.
How to use the CSS Loader Generator
- Click a loader style to select it.
- Choose the color, size and animation speed.
- Copy the HTML snippet and place it where the loader should appear.
- Copy the CSS into your stylesheet.
Frequently asked questions
Are CSS loaders better than GIFs?
Yes, in most cases. They are much smaller, stay sharp on every screen, can be recolored with one value and use hardware-accelerated animations.
How do I center the loader?
Place it inside a container with display: grid and place-items: center, or use flexbox with justify-content and align-items set to center.
Do they respect reduced motion settings?
You can wrap the animation in a prefers-reduced-motion media query to slow or stop it for users who prefer less motion.