CSS loaders — 40+ pure-CSS spinners/skeletons, customize color/size/speed, copy ready-to-use code.
- Runs locally
- Category Color & Design
- Best for Moving from a visual idea to reusable color values.
<div class="l-classic-spinner"></div>
.l-classic-spinner {
width: 48px;
height: 48px;
border: calc(48px / 8) solid rgba(0,0,0,0.1);
border-top-color: #8b5cf6;
border-radius: 50%;
animation: l-classic-spinner-spin 1s linear infinite;
}
@keyframes l-classic-spinner-spin { to { transform: rotate(360deg); } }Click any loader on the left to customize and copy.
What this tool does
A library of 40+ production-ready CSS loaders — every spinner, skeleton, progress bar, and bouncy dot you actually ship in a real app. Pick a loader from the gallery, customize the color, size in pixels, and animation speed in seconds, then copy the HTML and CSS with one click. Eight categories cover every common need: classic spinners (border-top trick, dual ring, conic-mask gradient, dashed, dotted), dot loaders (bounce, flashing, 3×3 grid, orbit, stretching, typing indicator), bar loaders (audio bars, staircase, sliding bar, equalizer, vertical flow), pulses (circle, ripple, double, heart beat, breathing square), shimmer skeletons (line, card with avatar + lines, image block, table row, paragraph), decorative rings (thin, thick, multi-color, nested, dashed), progress bars (indeterminate, striped, segmented, circular conic, loading wave), and waves (dot wave, bar wave, sine, square, horizontal ripple, bouncing balls). Every loader is pure CSS — no JS runtime, no SVG library, no animated GIF — so it works inside React, Vue, Svelte, plain HTML, server-rendered apps, or an MDX blog post without any setup. Toggle a light or dark background to verify contrast before you ship. The output uses scoped class names (e.g. `l-classic-spinner`) so you can paste two loaders into the same page without animation name collisions. Bundle weight is 0 bytes of JS — these are static CSS rules. Designed for developers wiring loading states into a button, designers building a mockup, and indie hackers who just need a great spinner in 10 seconds.
Tool details
- Input
- Text + Numbers + Structured content
- The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
- Output
- Live result + Copy + Preview
- The result area focuses on usable output, with copy, download, or preview actions when supported.
- Privacy
- Browser-side processing
- The main tool logic does not call an external API, so inputs normally stay in the current tab.
- Save / share
- No account required
- Open the page and use it; whether results survive refresh depends on the tool.
- Performance budget
- Initial JS <= 25 KB
- No WASM budget is declared, keeping the tool quick to open on mobile.
- Best fit
- Color & Design · Designer
- Category and role tags drive related tools, internal links, and quick fit checks.
How to use
-
1. Input
Paste or drop your content into the tool panel.
-
2. Process
Click the button. All processing is local in your browser.
-
3. Copy / Download
Copy the result or download to disk in one click.
How CSS Loaders Generator fits into your work
Use it while choosing, checking, converting, or documenting colors for real interface work.
Color jobs
- Moving from a visual idea to reusable color values.
- Checking contrast and accessibility before a UI ships.
- Keeping brand, design, and implementation color decisions aligned.
Color checks
- Verify contrast against the actual background, not just a sample swatch.
- Check dark and light themes separately when both exist.
- Copy the final format your design system or codebase expects.
Good next steps
These links move the current task into a more complete workflow.
- 1 CSS Keyframes Animation Generator Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only Open
- 2 CSS Gradient Generator Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export. Open
- 3 CSS Clip-Path Generator Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles. Open
Real-world use cases
Wiring a spinner into a submit button without bloating the bundle
You have a sign-up form and the submit button needs a tiny spinner while the request is in flight. Grab the classic spinner at 20px, set the color to your button text color, speed 0.9s, and drop the 24 lines of CSS into your component. No npm install, no SVG, no extra 12KB icon library just for one spinner. It renders the same in React, in an Astro island, and in a plain HTML prototype.
Building a content-shaped skeleton for a feed that loads in 1-2s
Your profile feed takes about 1.5s on a 4G connection, and a bare spinner makes that feel slower than it is. Pick the card skeleton with avatar plus three lines, match the shimmer color to your surface gray, and repeat it five times for the visible viewport. Users see the layout shape immediately, so the perceived wait drops even though the real load time is unchanged.
Dropping a loading state into an MDX or static blog post
You are writing a tutorial about async patterns and want a live loader inline, but your MDX pipeline has no client JS. Because every loader here is pure CSS, you paste the HTML plus a scoped style block straight into the post and it animates on a fully static page. No hydration, no runtime, no broken build on a server-rendered or RSS-cached version of the article.
Mocking up three loading variants for a design review
Before a design crit you want to show the team a spinner, a pulse, and a skeleton side by side at the same brand color so they can pick one. Generate all three at 48px, paste them into one HTML file, and toggle the dark background to check contrast. Because class names are scoped per loader, the three animations coexist on one page with zero name collisions.
Common pitfalls
Spinning a large loader too fast. A 64px ring at 0.6s looks frantic; for sizes over 48px slow it to 1.4-2s so it reads as calm, not panicked.
Using a skeleton for a sub-300ms or unpredictable wait. Skeletons under 300ms just flicker; for vague background work like "sending email" use a spinner instead.
Pasting two copies of the same loader without renaming. The shared keyframes name collides; rename one scope class (e.g. l-classic-spinner to l-classic-spinner-big) and its keyframes to match.
Privacy
Everything runs in your browser. The loader gallery, your color, size, and speed settings, and the generated HTML/CSS never leave the page and are not sent to any server. Nothing about your choices is written into the URL or stored remotely, so you can use this on internal or pre-launch work without anything leaking.
FAQ
Tool combos
Folks in your role tend to reach for these alongside this tool.
- ASCII Art Generator Generate ASCII art from text — figlet-style banners, multiple fonts.
- Aspect Ratio Calculator Calculate aspect ratio — fix any 1 of [width, height, ratio], get the other two.
- Base64 Encoder & Decoder Encode or decode Base64 — text, files, and Data URLs. Runs entirely in your browser.
- Base64 Image Converter Image ⇄ Base64 — drag-drop PNG/JPG/WebP/SVG, get data URI for CSS / HTML / Markdown.