CSS Loader Generator
Create pure-CSS loading spinners, dots, and bar animations — no JavaScript or images needed. Customizable colors, sizes, and speeds.
Last updated: March 25, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is CSS Loader Generator?
A CSS loader is an animated loading indicator built entirely with CSS — no JavaScript event loops, no GIF images, no external icon libraries. They work by combining CSS `@keyframes` animations with CSS `transform` (rotate, scale, translate), `opacity`, and `border` properties. Because browsers handle CSS animations on the compositor thread (a separate thread from JavaScript), CSS loaders remain smooth even when the main JavaScript thread is blocked by data fetching or computation.
The most common CSS loader types: **Spinner** (a circle with a partial border rotating continuously — built with border-radius: 50% and a border with one colored side). **Dots** (3–5 dots pulsing with staggered animation-delay values, creating a wave effect). **Bars** (vertical rectangles scaling up and down sequentially). **Dual Ring** (two counter-rotating concentric circles). **Skeleton** (gray placeholder rectangles that match the shape of loading content, using a CSS shimmer gradient animation). All are GPU-composited animations that run at 60fps without touching the JavaScript main thread.
How to Use CSS Loader Generator
Select a loader type from the grid: Spinner, Dots, Bars, Dual Ring, Pulse, or Skeleton
Customize the primary color using the color picker (or enter a Hex/HSL value directly)
Adjust size with the size slider — the output code uses em units so the loader scales with font-size
Set the animation speed: "Slow" (1.5s), "Normal" (0.75s), or "Fast" (0.4s)
Click "Copy HTML + CSS" to get both the HTML markup and the complete CSS — drop both into your project
Common Use Cases
- Adding a spinner to a button while an async form submission is in progress (disabled state indicator)
- Displaying a full-page loading overlay when navigating between routes in a React/Next.js SPA
- Using dot loaders in chat applications to indicate "typing..." status for other users
- Adding skeleton loaders as content placeholders while API data fetches in a dashboard or feed
- Creating a bar loader for an audio visualizer or file upload progress indicator
- Adding subtle pulse animations to "loading" placeholder text in a card layout
- Displaying a spinner in a modal header while async content loads inside the modal
- Using a skeleton loader in a product grid while e-commerce product data fetches from a CDN
Example Input and Output
A complete pure-CSS spinner implementation:
Type: Spinner
Color: #6366f1 (Indigo)
Size: 40px
Speed: Normal (0.75s)<!-- HTML -->
<div class="loader-spinner"></div>
/* CSS */
.loader-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid rgba(99, 102, 241, 0.2);
border-top-color: #6366f1;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Accessibility: Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.loader-spinner {
animation-duration: 2s;
}
}Client-Side Processing
All loader code generation runs in your browser. No data is sent to our servers.
CSS Custom Properties for Theming
Define your loader colors as CSS custom properties: .loader { --loader-color: #6366f1; border-top-color: var(--loader-color); }. Then override per component or dark mode: [data-theme="dark"] .loader { --loader-color: #a5b4fc; }. This makes the entire loader color system theme-aware from a single variable change, without requiring class toggles or JavaScript.
will-change Performance Hint
Add will-change: transform to animated elements to hint browsers to promote the element to its own compositor layer before animation starts, reducing animation jank: .loader { will-change: transform; }. Use sparingly — each will-change element consumes GPU memory. For page-level loaders that persist, will-change is worth the memory trade-off. For loaders that appear briefly on hundreds of items simultaneously, omit it and let the browser manage compositing.
Frequently Asked Questions
How do CSS animations work without JavaScript?
How does the border-trick spinner work?
What is a skeleton loader and when should I use it?
How do I handle prefers-reduced-motion for accessibility?
Why use CSS loaders instead of Lottie or GIF animations?
Can I animate multiple loaders simultaneously without performance issues?
How This Tool Works
Loader types are defined as CSS template objects: each contains an HTML structure string and a parameterized CSS template string. When the user adjusts color, size, and speed, the template variables are substituted: the color value replaces the {{color}} token, the animation duration replaces {{speed}}, and em-based sizing scales relative to {{size}}. The staggered dot animations use CSS animation-delay: {{index * 0.15}}s applied to each dot element. The final HTML and CSS strings are displayed in the output panel and copied to clipboard.
Technical Stack