CSS Loader Generator — Spinners & Skeletons (Free)
Generate pure-CSS loading spinners, dots, bars, and skeleton shimmers. No SVG, no images. Adjustable color, size, speed. Copy-paste ready.
About CSS Loader Generator
A CSS loader generator builds animated loading indicators using only CSS — keyframes, transforms, borders, gradients — no SVG, no GIF, no image dependencies. Pure-CSS loaders weigh ≈0 bytes (they live inside your stylesheet), animate on the GPU, scale crisply at any DPI, and inherit color from CSS variables. The ZTools generator includes 30+ designs: classic ring spinner, dual-ring, dots (3-dot bouncing, 4-dot pulse, dot grid), bars (5-bar audio, progress bar, segmented), shimmer skeletons, dual-color spirals, and Material-style indeterminate progress bars.
Use cases
- Initial app boot loaders. Show before your JS bundle hydrates. Pure CSS loaders work even if JS hasn't loaded yet — perfect for the SPA-shell-loading moment.
- Form submit feedback. Replace the button label with a small inline spinner during a network request. Confirms the click registered and prevents double-submit.
- Skeleton placeholders. Shimmering gradient bars/cards while data loads. Reduces perceived wait time vs. an empty white screen with a centered spinner.
- Empty state CTAs. Subtle pulsing indicator on a "Sync now" button when data is stale — invites the click without screaming.
How it works
- Pick a loader style. Ring, dots, bars, shimmer, spiral, indeterminate progress, etc. — preview each live.
- Set size + color. 16–80 px typical; primary color + optional secondary for dual-color loaders.
- Set animation speed. 0.5s – 2s per cycle. Faster = urgency; slower = "background work, take your time".
- Copy CSS. Includes the @keyframes block + the .loader class. Paste into your stylesheet — no JS needed.
Examples
Input: Ring spinner, 32px, primary #6366f1, 1s
Output: Classic indigo ring spinner — drop into any button or empty state.
Input: 3-dot bounce, 8px each, blue
Output: Three blue dots that bounce in sequence; ChatGPT-style "thinking" indicator.
Input: Shimmer card, 320×120px
Output: Skeleton card with diagonal-gradient shimmer running across — feels like "loading" without looking broken.
Frequently asked questions
Why CSS instead of SVG / GIF?
CSS loaders are smaller (no file), GPU-animated, scale to any DPI, and inherit currentColor for theming. SVG is also good (and supports more complex shapes); GIF is the worst option (rasterised, fixed size, no theming, larger).
Do they work without JavaScript?
Yes — pure CSS animations. They start the moment the element is in the DOM, regardless of JS state.
How do I show/hide them?
Toggle a class: `.loading { display: block }` / `.loading { display: none }`. Or use `aria-busy="true"` on the parent + CSS that targets `[aria-busy="true"] .loader { display: block }`.
Accessibility?
Loaders should have `role="status"` and `aria-label="Loading"`. Don't rely on visual-only feedback — screen readers need an announcement.
Why do my keyframes conflict with another loader?
Use unique @keyframes names (e.g. `loader-1-spin` not `spin`). The generator names keyframes based on the style for collision-safety.
Does it support reduced motion?
Wrap the animation in `@media (prefers-reduced-motion: no-preference)` so motion-sensitive users see a static indicator instead of a spin. The tool offers this toggle.
Pro tips
- Use the inherit-color pattern: `border-color: currentColor transparent transparent transparent` so one CSS class adapts to button context.
- Match loader animation speed to perceived task urgency: 0.6s for inline button submits; 1.2s for full-page loads.
- For skeletons, match the height/shape of the actual content that will replace them — eliminates layout shift.
- Always include `@media (prefers-reduced-motion)` fallback for accessibility.
- Keep loader sizes ≤ 24px for inline button use; reserve large 64–80px loaders for full-page or full-modal contexts.
Reviewed by Ahsan Mahmood · Last updated 2026-05-06 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/css-loader-generator.