EspañolCSS loader generator (loading spinner)
Tap a template, adjust color, size and speed and copy the code. They all use only transform and opacity, which are light on the browser, and respect people who prefer less motion.
CSS loading animations
Available in: 
CSS loader generator (loading spinner): what it is for
Choose from seven loading indicator templates (ring, double ring, dots, bars, pulse, progress bar and flipping square) and adjust the color, size and duration. The animations use only transform and opacity.
The code comes with role=status, hidden text for screen readers and a slower animation for people who ask for less motion in their system settings.
How to use
- Choose the loader template.
- Adjust color, size and duration.
- Copy the HTML and CSS.
When to use it
- Loading screens for sites and apps.
- Buttons while a form is being submitted.
- Replacing heavy loading GIFs.
Frequently asked questions
Why use CSS instead of a GIF?
A CSS loader weighs a few bytes, stays sharp on any screen, changes color with a variable and runs off the browser's main thread, so it stays smooth even while the page loads.
Is the loader accessible?
The code includes role="status" and hidden text (Loading…) for screen readers. With prefers-reduced-motion, the animation gets much slower for people who ask for less motion.
When should I show a loader?
Only when the wait goes beyond about half a second. For very short waits, a loader flashing on screen is more annoying than helpful.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.