CSS Loader Generator
Generate pure-CSS loading spinners and animations with customizable size, color, thickness and speed. Live preview and copy-ready CSS + HTML. No images, no JS.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Generate a loading spinner in pure CSS
A loading spinner reassures users that something is genuinely happening while they wait, and it does not need an animated image or a JavaScript library to work, because CSS animation alone can draw and spin one. This generator produces pure-CSS loaders and spinners with a customisable size, colour and thickness, so you get a lightweight animated indicator ready to drop straight into a page. Being pure CSS, it appears the instant the page renders, exactly when a loader is most needed.
Why pure CSS is the right choice
A CSS spinner is just a few lines of code that animate a border or a simple shape, with no separate image file to download and no JavaScript that has to load and run first. That means it appears instantly, scales perfectly crisply at any size, and adds almost nothing to the overall page weight, all of which matters because a loader is by definition shown at the exact moment the page is still loading and resources are scarce. Customising its size, colour and thickness lets it match your design rather than looking generic.
Copy the CSS
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why use a CSS spinner over an animated image?
Because it is a few lines of code with no image to load and no library, so it appears instantly, scales crisply and adds almost nothing to the page.
What can I customise?
The size, colour and thickness of the spinner, so it matches your design rather than looking generic.
Does it need JavaScript?
No. It is pure CSS animation, so it runs without any script and shows even while the rest of the page is still loading.
When should a loader appear?
Whenever an action takes long enough that a user might wonder if it worked, to reassure them that something is happening.
Is my input uploaded?
No. The generator runs entirely in your browser.
Privacy & Security
All processing happens locally in your browser — nothing is uploaded.
How to Use
Pick a style and tweak the size, color and speed. Copy the generated CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.