CSS Loading Animation Generator
Create ring, dots, bars, pulse and other classic CSS loading spinners visually with simple sliders.
Adjust color, size, speed and thickness in the live preview, then copy the ready-to-use HTML/CSS with one click.
This tool has been used … times.
6 Loading Spinner Styles
A loading indicator tells users that something is happening behind the scenes. This tool generates six spinner styles with pure CSS — no JavaScript required.
The most classic rotating spinner. Only part of a circular border is colored and rotated. The dual ring version colors the top and bottom with two different colors.
Multiple elements move with a staggered rhythm. Shifting
animation-delay creates the sequential bounce and stretch effects. You can change the number of items with the slider.
Shapes expand from the center and fade away. Combining
transform: scale() with opacity creates a soft, gentle loading feel.
How to Use
- Pick a spinner type from “Style”. If you are unsure, starting from a preset is the fastest way.
- Set the main color. For Dual Ring and Ripple, also set “Color 2”.
- Fine-tune the size, speed and thickness with the sliders. For Dots and Bars, adjust the number of items with “Items”.
- Check the motion in the preview. Switch the backdrop to Dark to see how it looks on dark websites.
- When you are happy with it, click “Copy” and paste the code into your site.
Using the Generated Code
The code is generated with a .my-loader class. Place the HTML where you want the spinner to appear and add the CSS to your stylesheet — that is all it takes.
<div class="loading-area"> <div class="my-loader"></div> </div>
* Dots, Bars and Ripple need child div elements inside .my-loader. Copy with the “HTML + CSS” format to get the full structure.
* You can rename the .my-loader class freely. If you do, replace every selector except the @keyframes rules.
* You can test the copied code with our HTML / CSS / JS Code Preview Tool.
Tips for a Polished Look
Too fast feels frantic, too slow looks frozen. A cycle of roughly one second blends naturally into most websites.
A loader is not the main content. Around 20–24 px inside a button, or 48–64 px centered on the screen, keeps things elegant.
Pale spinners can disappear on white backgrounds. Switch the preview backdrop to match where the loader will actually be used.