Generate CSS-only loading spinners — ring, dual ring, bouncing dots, equalizer bars, pulse — with size, color and speed controls, accessible markup and reduced-motion fallbacks.
Generated locally in your browser — your colors, settings and code never leave this page.
Loading states without assets
Five spinners — ring, dual ring, bouncing dots, equalizer bars, radar pulse — as pure HTML + CSS pairs: no GIF requests, crisp at any size, recolored by one value. Set color, size and cycle speed while the loader runs live, then copy both pieces.
Worked example (ring)
<div class="loader" role="status" aria-label="Loading"></div>
.loader {
width: 48px; height: 48px;
border: 5px solid #e5e7eb;
border-top-color: #6366f1;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }Accessibility, included not bolted on
- role=”status” + aria-label announces loading to screen readers; the prefers-reduced-motion block stops the spin for users who opt out — pair with visible “Loading…” text so they are not left with a frozen circle.
Choosing a loader
- Ring/dual: general waits. Dots: chat and inline “thinking”. Bars: audio/processing. Pulse: radar-style ambient waiting.
- Known layouts deserve skeletons instead — pulse-soft in the Animation Generator is the skeleton shimmer base.
Performance
- All five animate transform/opacity only — compositor-friendly by design, even on low-end phones.
How to use the CSS Loader Generator
- Choose a loader — ring, dual ring, dots, bars or pulse.
- Set color, size and cycle speed; watch it run live.
- Copy the HTML and CSS pair.
Frequently asked questions
Why CSS loaders instead of GIFs or SVG?
Zero requests, crisp at any size, recolorable with one value, and trivially themed. Every loader here is a few elements plus @keyframes — nothing to load while telling users something is loading.
What accessibility do the loaders include?
role="status" with an aria-label announces the loading state to screen readers, and a prefers-reduced-motion block stops the animation for users who opt out — pair it with visible "Loading…" text for them.
When should a skeleton replace a spinner?
When the layout is known: skeletons (see pulse-soft in the Animation Generator) set expectations of WHERE content appears. Spinners suit unknown or full-screen waits under a few seconds.
