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.
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.