CSS Loading Spinner Generator
Build a lightweight loading indicator in pure CSS. Choose a spinner, dots, bars or pulse, tune the size, color and speed, then copy the keyframes and markup.
How to generate a CSS loader
- Pick a loader style: spinner, dots, bars or pulse.
- Adjust the size, color, speed and thickness.
- Copy the generated CSS and the matching HTML snippet.
Examples
Default ring spinner
type spinner, size 40px, color #6366f1, speed 1s
animation: loader-spin 1s linear infinite;
Bouncing dots
type dots, size 40px, color #6366f1, speed 1s
animation: loader-bounce 1s ease-in-out infinite;
Frequently asked questions
Does the loader use any images or JavaScript?
No. Every loader is pure CSS built from a keyframes block and a few element rules, so it works with no images, fonts or scripts.
How do I add the loader to my page?
Paste the CSS into your stylesheet and the HTML snippet where you want the loader. The markup uses a single .loader class that the CSS targets.
Why does the dots loader need three spans?
Each dot is its own span so the CSS can stagger the animation with nth-child delays. That offset is what creates the bouncing wave effect.
Can I change the spin speed?
Yes. The speed control sets the animation duration in seconds, so a smaller number spins faster and a larger one slows it down.
Is my configuration sent to a server?
No. The CSS and preview are generated entirely in your browser, and nothing about your settings is uploaded.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Cubic Bezier Generator
Build a custom CSS cubic-bezier() easing curve by dragging two control points. Preview the animation, pick a preset and copy the timing function.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.