CSS Loader Generator
Pick one of 15 pure CSS loading animations, set size, colour and speed and copy the code. One element, accessible, reduced-motion rule.
Loading…
CSS
.loader {
width: 48px;
height: 48px;
border: 5px solid rgba(81, 69, 229, 0.2);
border-top-color: #5145e5;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
/* the label is read by screen readers and hidden on screen */
.loader .sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.loader,
.loader::before,
.loader::after {
animation-duration: 4s;
}
}
HTML
<div class="loader" role="status">
<span class="sr-only">Loading…</span>
</div>
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to Cubic Bezier Generator or CSS Minifier.
Free CSS Loader Generator
Choose a loading animation made of one HTML element and a few lines of CSS. The markup is accessible and the animation slows down for people who ask for less motion. It gives developers a quick browser-based way to solve a focused css loader generator task before moving the result into a project.
How to use CSS Loader Generator
Pick a style, set the size, colour and speed, then copy the CSS and the HTML.
Common mistakes
- Removing the hidden label: screen reader users will not know something is loading.
- Using a loader for waits under a second: it only flickers. Show it after a short delay.
Frequently asked questions
Is it one element?
Yes. Each loader is one div. Some styles use its ::before pseudo-element, which needs no extra markup.
How is it accessible?
The div has role="status" and a hidden text label that screen readers read. When the reader asks for reduced motion, the animation is slowed down.
Can I change the colour later?
Yes. Replace the colour in the CSS. For many loaders, use a CSS variable.
Is anything uploaded?
No. The code is built in your browser and nothing is sent to a server.
How do I use this css loader generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Frontend & Design
User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back