CSS Loader Generator
Build a lightweight loading indicator without GIFs or JavaScript. Choose a style, color, size and speed, and copy the keyframes and class.
Last updated: · Runs 100% in your browser
// controls
Presets
48px
5px
1s
Live preview
Generated CSS
.loader {
width: 48px;
height: 48px;
border: 5px solid rgba(0, 255, 102, 0.2);
border-top-color: #00ff66;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.loader, .loader span { animation-duration: 3s; }
}// Example output
.loader {
width: 48px;
height: 48px;
border: 5px solid rgba(0, 255, 102, 0.2);
border-top-color: #00ff66;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.loader, .loader span { animation-duration: 3s; }
}// Features
- ▸Spinner, dots, bar and pulse styles
- ▸Color, size, thickness and speed
- ▸Pure CSS keyframes
- ▸Respects reduced motion
- ▸Copy or download
// How to use
- 01Adjust the controls on the left or pick a preset to start the CSS Loader Generator.
- 02Watch the live preview update instantly as you change each setting.
- 03Fine-tune the generated CSS by hand in the code panel if you like.
- 04Click Copy CSS or Download CSS, or Share to send a link to your design.
// FAQ
Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.
// Related tools
CSS Animation Generator
Generate CSS keyframe animations — fade, slide, bounce, spin, pulse and shake — with timing controls.
CSS Transform Generator
Rotate, scale, skew and translate elements in 2D and 3D and copy the combined CSS transform.
CSS Button Generator
Design production-ready buttons with gradients, borders, hover effects and shadows, then copy the CSS.