SVG spinner generator — lightweight loading animations

Choose a ring, dual ring, dots, bars or pulse, set the size, colour and speed, and get one self-contained animated SVG loading spinner that needs no JavaScript and no extra CSS file.

Live demo · real result from this tool
Style

SVG

SVG

Animated with CSS inside the SVG, so it works inline and as an <img>. It slows down for visitors who prefer reduced motion. Add role="status" to the element that contains it.

Processed on your device — nothing is uploaded.

How to use the SVG spinner generator

  1. Pick a Style: Ring, Dual ring, Dots, Bars or Pulse.
  2. Set the Size in pixels (12–256) and choose a Colour.
  3. For Ring, set the Track colour (the faint full circle behind the moving arc) or clear it for none.
  4. For Ring and Dual ring, set the Stroke width (1–16).
  5. Set Seconds per cycle (0.2–4), then copy the code or download spinner.svg.

What it does and when to use it

A spinner tells people that something is happening: a form is sending, search results are loading, or a file is being processed. An SVG spinner is a few hundred bytes, stays sharp on any screen, and needs no icon font or GIF.

Use a ring or dual ring next to a button label, dots or bars inside a chat or search box, and a pulse as a soft “live” indicator. If you prefer a spinner made from pure CSS and HTML elements, see the CSS loader generator. When the task finishes, the SVG checkmark generator makes a matching animated success or error icon. For other small interface graphics, try the SVG badge generator.

How it works

Each style is a few circles or rectangles with the class s and a short keyframe animation:

Style What moves
Ring An arc covering 28% of the circle rotates once per cycle
Dual ring Two dashed rings turn in opposite directions; the inner one is 60% opaque
Dots Three dots grow and fade in turn, each delayed by one sixth of a cycle
Bars Five bars stretch up and down, each delayed by one tenth of a cycle
Pulse Two discs grow from the centre and fade, half a cycle apart

transform-box: fill-box makes each shape scale or rotate around its own centre. The tool builds the code from your settings in the browser; nothing is random and nothing is uploaded.

Worked examples

Default ring. 48 px, blue #2563eb, track #e5e7eb, stroke 4, 0.9 s. The radius is 22, so the moving arc uses stroke-dasharray="38.7 138.2" (28% of the 138.2 px circumference) and animation:r 0.9s linear infinite.

Green dots. Dots, 40 px, #16a34a. The middle dot is <circle class="s" cx="20" cy="20" r="4" fill="#16a34a" style="animation-delay:0.15s"/>, 0.15 s being one sixth of the 0.9 s cycle.

Slow bars and reduced motion. Bars, 36 px, 1.2 s per cycle. The reduced-motion rule sets animation-duration:3.6s!important, three times the normal cycle.

Limits and tips

  • Some email programs and older design apps ignore CSS inside SVG, so the spinner may appear frozen there. Browsers animate it.
  • Very short cycles can look nervous. Start near the 0.9 s default and adjust by eye.
  • Only show a spinner when a wait is likely. For very short waits, it can flash and distract.

Frequently asked questions

Does the spinner need JavaScript or a separate stylesheet?
No. The animation is CSS keyframes inside a style element in the SVG itself. You can paste it inline into HTML or save it and use it as an img source, and it will move in both cases.
What happens for people who turn off animations?
The SVG includes a prefers-reduced-motion rule. When a visitor's system asks for reduced motion, the cycle becomes three times slower instead of stopping, so the page still shows that something is loading.
Is the spinner accessible to screen readers?
The SVG has role="img", a title and aria-label="Loading". Also put role="status" on the element that contains it, and remove or hide the spinner when loading finishes, so screen readers know when the state changes.
Can I change the colour later?
Yes. Search the file for the hex colour and replace it, or regenerate it here. The ring track colour is a separate value you can leave blank for no track.

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close