CSS Loader & Spinner Generator
Create pure-CSS loading spinners and animations — spinner, dual-ring, pulse, and dots styles with adjustable size, speed, and color. Copy the CSS. Free.
💡 How to use
- Pick a loader style, then adjust size, speed, and color.
- Copy the CSS — it includes the class and its
@keyframes. - Add
<div class="loader"></div>to your HTML to use it.
Free CSS Loader & Spinner Generator
Create pure-CSS loading spinners and animations, then copy the code in one click. Choose from spinner, dual-ring, pulse, and bouncing-dots styles, adjust size, speed, and color with a live preview, and paste ready-to-use CSS — including the keyframes — into your project. Free and image-free.
What is a CSS loader?
A CSS loader is a loading indicator built entirely with CSS animations — no GIFs, SVGs, or JavaScript required. Because it is pure CSS, it stays sharp at any size, weighs almost nothing, and animates smoothly on the GPU. Loaders reassure users that something is happening during page loads, form submissions, and data fetches, which reduces perceived wait time and bounce.
Loader styles you can generate
This tool includes several popular animation styles:
- Spinner — the classic rotating ring, the most recognisable loader.
- Dual ring — two spinning arcs for a lighter, modern look.
- Pulse — a single dot that scales and fades in and out.
- Bouncing dots — three dots that animate in sequence.
How to use the loader generator
Building a loader takes seconds:
- Pick a loader style.
- Adjust the size, animation speed, and color.
- Watch the live preview on a dark stage.
- Copy the CSS — it includes the class and its @keyframes — and add the matching HTML element.
How to add the loader to your page
After copying the CSS into your stylesheet, add a simple element to your HTML. For most styles that is a single element with the loader class, for example a div with class 'loader'. The bouncing-dots style uses three child spans inside the loader element. The generated code shows exactly what markup each style expects, so you can paste and go.
Why pure-CSS loaders are better than GIFs
Animated GIF spinners are heavier, limited to a fixed size, and often look blurry on high-DPI screens. CSS loaders download as a few lines of text, scale to any dimension without losing quality, let you change the color to match your brand instantly, and animate more smoothly. They also avoid an extra network request, which is a small but real performance win.
Pro tip
Keep loader animations quick and calm — a spin that takes around one second feels responsive without being distracting. Match the loader color to your brand accent, and for very short waits consider a subtle skeleton screen instead of a spinner. Pair this with our CSS Gradient Generator and Box-Shadow Generator to style the surrounding UI.
FAQ
Is this CSS Loader Generator free?
How do I add a CSS loading spinner to my website?
Do these loaders need JavaScript?
Can I change the loader's color and size?
Are CSS loaders better than animated GIFs?
How do I center a loader on the page?
Do CSS animations work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Gradient Generator for a faster SEO workflow.