Do I need any HTML markup besides the CSS?

Single-element styles (ring, dual ring, gradient ring, dashed ring, half moon, circle progress, pulse, blink, heartbeat, square, flip, triangle spin, bar swing, shimmer, barber pole) just need an empty . Multi-element styles (dots, ellipsis, bars, wave, grid, ripple, orbit, comet, triad, iOS activity, windmill, fold, chase, double bounce, ping, hourglass, bounce ball, indeterminate bar) need two to twelve or nested elements inside the .spinner container — the generated CSS targets them with :nth-child or class selectors for staggered timing.

Why does the dual ring style look different from the ring style?

The ring spinner colors only the top border and leaves the rest a faint tint, so it looks like one moving arc. The dual ring colors both the top and bottom borders, producing two opposite arcs that appear to chase each other as they rotate.

What does the Circle progress style need that the others don't?

It animates a CSS custom property (--progress-angle) through a conic-gradient using the @property at-rule, which is required for browsers to smoothly interpolate a custom property's value in an animation. This is supported in all current major browsers; on very old browsers the arc will render but won't animate, degrading gracefully rather than breaking.

Will this spinner work without JavaScript?

Yes — it's a pure CSS @keyframes animation, so it runs as soon as the element is in the DOM. You only need JavaScript to show/hide the spinner element itself, e.g. while a fetch request is in flight.

Is a CSS spinner accessible to screen reader users?

Add role="status" and an aria-label like "Loading" (or a visually-hidden text node) on the spinner's container so assistive tech announces the loading state — the CSS animation itself carries no semantic meaning on its own.

Does this tool send my choices anywhere?

No — everything is generated and previewed locally in your browser. Nothing is uploaded to a server.

CSS SPINNER GENERATOR

Pick a loading spinner style, dial in size, speed, and color, then copy the CSS.

Style

Size: 48px

Speed: 1s

Color

CSS

.spinner {
  width: 48px;
  height: 48px;
  border: 6px solid #ff6a3533;
  border-top-color: #ff6a35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

How to build a CSS spinner

1
Pick a spinner style from 34 options — rings, dots, bars, shapes, and skeleton/progress loaders.
2
Adjust the size, animation speed, and color on the live preview.
3
Copy the generated CSS, including the @keyframes rule.
4
Paste the markup (a div, with spans for the multi-element styles) and CSS into your project.

Questions

Do I need any HTML markup besides the CSS?: Single-element styles (ring, dual ring, gradient ring, dashed ring, half moon, circle progress, pulse, blink, heartbeat, square, flip, triangle spin, bar swing, shimmer, barber pole) just need an empty <div class="spinner"></div>. Multi-element styles (dots, ellipsis, bars, wave, grid, ripple, orbit, comet, triad, iOS activity, windmill, fold, chase, double bounce, ping, hourglass, bounce ball, indeterminate bar) need two to twelve <span> or nested <div> elements inside the .spinner container — the generated CSS targets them with :nth-child or class selectors for staggered timing.
Why does the dual ring style look different from the ring style?: The ring spinner colors only the top border and leaves the rest a faint tint, so it looks like one moving arc. The dual ring colors both the top and bottom borders, producing two opposite arcs that appear to chase each other as they rotate.
What does the Circle progress style need that the others don't?: It animates a CSS custom property (--progress-angle) through a conic-gradient using the @property at-rule, which is required for browsers to smoothly interpolate a custom property's value in an animation. This is supported in all current major browsers; on very old browsers the arc will render but won't animate, degrading gracefully rather than breaking.
Will this spinner work without JavaScript?: Yes — it's a pure CSS @keyframes animation, so it runs as soon as the element is in the DOM. You only need JavaScript to show/hide the spinner element itself, e.g. while a fetch request is in flight.
Is a CSS spinner accessible to screen reader users?: Add role="status" and an aria-label like "Loading" (or a visually-hidden text node) on the spinner's container so assistive tech announces the loading state — the CSS animation itself carries no semantic meaning on its own.
Does this tool send my choices anywhere?: No — everything is generated and previewed locally in your browser. Nothing is uploaded to a server.