CSS Loader Generator
Generate CSS loaders and spinners — spinner, dots, pulse, bars, and ripple. Customize color, size, speed, and thickness. Copy the HTML and CSS with one click.
How to use
- 1 Click any loader card to open it in the modal and the preview updates instantly.
- 2 Customize the accent color, base color, size, speed, and thickness using the controls on the left.
- 3 Review the generated HTML and CSS code on the right panel with syntax highlighting for readability.
- 4 Copy the HTML snippet and CSS separately, or use them directly in your project.
Key features
- 25 ready-to-use CSS loaders including spinners, dots, bars, rings, squares, and more
- Customizable accent color, base color, size, speed, and thickness
- Live preview updates in real time as you tweak parameters
- Generated HTML and CSS with syntax highlighting, ready to copy
- All animations run in your browser with no server round-trips
CSS Loaders
A CSS loader (also called a spinner or progress indicator) is a purely CSS-animated element that signals loading or processing activity to the user. Unlike GIFs or JavaScript-based spinners, CSS loaders are lightweight, resolution-independent, and can be styled to match any design system: just change a few CSS custom properties.
This generator includes 25 distinct loaders spanning circles, dots, bars, squares, and progress bars. Each loader is built with clean CSS animations using @keyframes, box-shadow, transform, and border-radius techniques: no JavaScript, no images, no external dependencies.
Common Use Cases
API calls & data fetching
Show a loader while async data loads: SSR frameworks like Nuxt use loaders as fallback UI during client-side navigation.
Page transitions
A full-page loader masks layout shifts during route changes. A 300–600ms transition with a subtle loader feels faster than a flash of unstyled content.
Authentication flows
Replace button text with a small inline loader after login/register clicks to prevent double-submissions while the auth request completes.
Image & media loading
Show a skeleton or spinner while images or iframes load: users perceive the page as faster when placeholder UI replaces blank space.
Loader Categories
The 25 loaders are organised into five groups by visual pattern.
| Category | Count | Includes |
|---|---|---|
| Circles | 11 | Spinner, Dual Ring, Gradient, Orbit, Clipped, Radar, Counter Spin, Ring Pulse, Border Spin, Pulse, Ripple |
| Dots | 4 | Dots, Dual Orbit, Flash Dots, Bounce Dots |
| Bars | 5 | Bars, Equalizer, Cascade, Sliding, Rain |
| Squares | 3 | Dual Square, Grid Fill, Four Spin |
| Progress | 2 | Slide Bar, Ball Track |
Tips & Best Practices
Getting the most out of CSS loaders in production.
Match the brand colour
Use the accent color to match your brand palette. A loader that blends into the design language feels more polished and intentional.
Adjust speed to context
Fast operations (0.3–0.6s) should use faster animations. Slower operations (loading screens) can use slower, calmer animations (1–2s) to reduce perceived wait time.
Right-size for the container
A loader inside a button should be 16–20px. A full-page loader can be 48–64px. Use the size control to match the surrounding UI scale.
Use a base colour for contrast
The loader base colour serves as a track or background for the animated element. Light grey works on dark backgrounds; dark grey works on light backgrounds.
Consider motion preferences
Users with vestibular disorders may prefer reduced motion. Always use 'prefers-reduced-motion: reduce' in production to pause or slow down loaders.