CSS Loader Generator
Generate CSS-only loading spinners and loaders with customizable colors, sizes, animations and speed.
/* Select a loader style above */
<div class="loader"></div>
About this tool
A CSS-only loading spinner generator — pick a style (spinner, dots, bars, pulse, or ring), tweak the color, size, animation speed, and border thickness, then copy the ready-to-use CSS and HTML. No JavaScript, no SVG, no external libraries — just CSS animations that work in every modern browser.
Each loader uses standard CSS animation properties, so you can adjust timing functions, iteration counts, or add vendor prefixes as needed. The preview renders live inside a sandboxed container that isolates the generated code from the page styles — what you see is what you get.
Example: A blue (#5b8cff) spinner, 48px, 1.2s speed, 3px border produces a CSS animation where .loader has a bordered circle with the top border colored, spinning infinitely.
FAQ
Do the loaders work in all browsers? ›
Yes. The generated CSS uses standard @keyframes and border-radius animations that work in Chrome, Firefox, Safari, and Edge. For very old browsers (IE 11 and below) you may need vendor prefixes.
Can I change the animation speed or timing function? ›
Use the Speed slider to set the duration. For custom timing functions (ease-out, cubic-bezier, etc.), edit the animation property in the generated CSS after copying.
Do I need to add any JavaScript? ›
No. The loaders are pure CSS and HTML. Place the div in your page and include the CSS — the animation runs automatically.
Why does the thickness slider disappear for dots, bars, and pulse? ›
Those styles use solid shapes (dots use border-radius, bars use rectangles, pulse uses a solid circle) and does not have a border-thickness concept. Only the spinner and ring styles render a bordered circle.
How is this different from the CSS Animation Generator? ›
This tool generates ready-made loading indicators — spinners, dots, bars, rings, and pulse — with simple size, color, and speed controls. The <a href="/css-animation">CSS Animation Generator</a> is a full keyframe animation designer where you build custom animations from scratch with fade, slide, bounce, shake and other presets, tweak every keyframe, and set timing/easing/direction. Use this when you need a quick loader; use the Animation Generator when you need a bespoke animation for a hero, button, or page element.