CSS Loading Spinner Generator
Build a loading indicator entirely in CSS, with no image files, web fonts or JavaScript to download. Choose one of four styles (spinner, dots, bars or pulse), then tune its size, accent color, cycle speed and stroke thickness while a live checkerboard preview updates as you change each control. Copy the generated @keyframes block and element rules plus a matching HTML snippet, and paste both straight into your project.
How to generate a CSS loader
- Choose a style with the four buttons at the top: Spinner, Dots, Bars or Pulse.
- Set Size in px, which becomes the width and height of the indicator.
- Set Speed in seconds; a smaller number makes one animation cycle finish faster.
- Set Thickness / gap in px to control the spinner border width or the space between dots and bars.
- Type a hex color in the Color box or pick one with the swatch (an invalid hex falls back to #6366f1).
- Read the CSS and HTML panels and use the Copy button on each.
Examples
Default ring spinner (Spinner, 40px, #6366f1, 1s, 4px)
Spinner style, Size 40px, Color #6366f1, Speed 1s, Thickness 4px
.loader {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: #6366f1;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to {
transform: rotate(360deg);
}
}Staggered bars (Bars, 40px, 1s, 4px)
Bars style, Size 40px, Speed 1s, Thickness 4px
.loader span:nth-child(2) {
animation-delay: 0.125s;
}
.loader span:nth-child(3) {
animation-delay: 0.25s;
}Fading pulse (Pulse, 40px, #6366f1, 1s)
Pulse style, Size 40px, Color #6366f1, Speed 1s
.loader {
width: 40px;
height: 40px;
background: #6366f1;
border-radius: 50%;
animation: loader-pulse 1s ease-in-out infinite;
}Frequently asked questions
Does the loader use any images or JavaScript?
No. Every style is built from a @keyframes block and a few element rules, so it needs no images, GIFs, fonts or scripts and adds nothing to your network requests.
What are the four styles and how do they differ?
Spinner is a rotating ring with a colored top border. Dots is three circles that bounce in a staggered wave. Bars is three vertical bars that stretch up and down in sequence. Pulse is a single circle that scales up while fading out.
Does the Thickness / gap control mean the same thing for every style?
No. On a spinner it sets the ring border width. On dots and bars it sets the gap between elements, and on bars it also sets each bar's width. The pulse style ignores it entirely because it is a solid filled circle.
Why do the dots and bars need three spans?
Each dot or bar is its own span so the CSS can offset them with nth-child animation delays. That staggered offset is what creates the moving wave rather than three elements pulsing in unison.
Can I use rgb, hsl or named colors instead of hex?
In the tool the Color field only accepts a 3 or 6 digit hex value and falls back to #6366f1 if the input is not valid hex. If you call the API directly, the engine accepts any non-empty CSS color string, including rgb(), hsl() and named colors.
What size and speed ranges does the tool allow?
The controls accept a Size from 8 to 200 px, a Speed from 0.1 to 5 seconds and a Thickness / gap from 0 to 40 px. The underlying engine simply requires a positive size and speed and a non-negative thickness.
Does the output respect reduced motion preferences?
Not by default. The generated CSS always animates, so if you support users who prefer reduced motion you should wrap the animation in a prefers-reduced-motion media query yourself. The supporting article explains how.
How do I add the loader to my page?
Paste the CSS into your stylesheet and drop the HTML snippet where the indicator should appear. The markup uses a single .loader class that the rules target, and the dots and bars snippets include the three spans they need.
Is my configuration sent to a server?
No. The CSS, HTML and live preview are all generated in your browser, so none of your color, size or speed choices are uploaded anywhere.
Learn more
- How CSS-only loaders work, and when to use them
Why keyframe spinners beat GIFs and SVGs for loading states, how transform animations stay smooth, and how to respect reduced motion.
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.