Spinner Generator

Generate customizable loading spinners and indicators.

Spinner Type

Appearance

Size48px

Thickness4px

Color

Speed1s

Preview

Generated CSS

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #6366f120;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Spinner Generator?

Generate CSS-only loading spinners. Choose from ring, dot, bar, and pulse styles. Customize size, colour, and speed, then copy the CSS and HTML.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Spinner Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Select spinner style

Choose from ring, dot cluster, bar, pulse, or wave patterns. Each renders a live preview instantly.

Set size, colour, and speed

Adjust the width, border/dot colour, accent colour, and animation duration. Faster spinners (0.6-0.8s) feel more urgent; slower ones (1-1.5s) feel calmer.

Copy CSS and HTML

Click Copy to get the complete spinner with its @keyframes animation and the HTML markup including accessibility attributes.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Ring spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #6C2EF5;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Accessibility */
.spinner[role="status"]::after {
  content: 'Loading...';
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

Add role="status" and an aria-label="Loading" to the spinner element for screen reader accessibility.

Pro tips

Pro tips for better results

★

Add role="status" for screen reader accessibility

A spinning element with no text is invisible to screen readers. Add role="status" and aria-label="Loading" or include visually-hidden text within the spinner element.

★

Use animation-delay for dot/bar spinners

Staggered spinners (three dots bouncing in sequence) use animation-delay on each dot to offset the timing. Common pattern: 0s, 0.15s, 0.30s delay on three identical animations.

★

Match spinner speed to the expected wait time

For operations that complete in under 1 second, a fast spinner (0.6s) communicates urgency. For longer operations, a slower, calmer animation (1.2s) is less stressful.

FAQ

Frequently asked questions

CSS spinners are simpler and performant for basic ring or dot patterns. SVG spinners give more control over complex shapes and strokes. For most loading indicators, the CSS version is sufficient and has zero dependencies.

No. Everything runs in your browser. Nothing is sent to a server.