SVG Loading Spinner Generator
Generate a self-contained animated SVG loading spinner — circle stroke, dual ring, dotted ring, pulse/bouncing dots, bar loader or ripple — with your own size, colours and speed. Copy the SVG or download it as a .svg file. Runs entirely in your browser.
Input
Used by stroke-based spinners (Circle Stroke, Dual Ring, Bar Loader, Ripple).
Track colour (Circle Stroke, Dual Ring, Bar Loader) or second arc colour.
Duration of one full animation cycle, in seconds.
Accessible label announced by screen readers.
Output
Your spinner will appear here.
Guides
Create a clean, animated loading spinner as a single self-contained SVG — no image files, no icon fonts, no JavaScript. Pick a style, set the size, colours and speed, and copy the markup or download it as a .svg. The live preview shows exactly what you'll ship, because it renders the very same SVG string the code box holds.
How to use it
- Choose a spinner type from the seven presets.
- Adjust the size, stroke width, primary and track/secondary colours, and the speed (the duration of one full animation cycle, in seconds).
- Set an ARIA label so screen readers announce the busy state (defaults to "Loading").
- Copy the generated SVG, or download it as
spinner.svg.
Everything runs in your browser — nothing is uploaded, and the output is deterministic, so the same settings always produce the same markup.
The seven spinner styles
- Circle Stroke — the classic rotating arc over a faint track ring. The arc is a 75%-length dash on a full circle, spun with a CSS
rotatekeyframe. - Dual Ring — two quarter-circle arcs, one in the primary colour and one in the track colour, rotating in opposite directions.
- Dotted Ring — twelve dots arranged in a circle, each fading in turn to give the familiar "chasing" effect via staggered
animation-delay. - Pulse Dots — three dots that scale and fade in sequence, ease-in-out.
- Bouncing Dots — three dots that bounce vertically with a staggered delay.
- Bar Loader — a horizontal pill track with a shorter bar sliding back and forth (a wide
100×20viewBox). - Ripple — two expanding rings that grow and fade outward, offset by half the cycle.
Stroke width applies to the stroke-based styles (Circle Stroke, Dual Ring, Bar Loader, Ripple); the dot-based styles ignore it.
Why an animated SVG?
The animation lives in an embedded <style> block with CSS @keyframes, scoped to classes inside the SVG. That makes the file completely self-contained: drop it inline in your HTML, reference it in an <img> tag, or set it as a CSS background-image — the animation plays in every one of those contexts (only scripts are inert inside an image-loaded SVG, and this spinner uses none). Because it's vector, it stays razor-sharp at any size and weighs a fraction of an animated GIF.
Is it accessible?
The SVG carries role="status" and your aria-label, so assistive technology announces it as a live status region. Keep the label short and meaningful ("Loading", "Saving…").
Can I change the colours after generating?
Yes — the colours are plain hex values in the markup (stroke="…" / fill="…"). Edit them by hand, or regenerate with the colour pickers. For a spinner that inherits your text colour instead, replace the colour value with currentColor.
Does it work in emails or old browsers?
CSS-animated SVGs render in all modern browsers. Some email clients strip <style> or SVG entirely, so for email a fallback animated GIF is safer. For the web, the SVG is the lighter, sharper choice.
Privacy
The spinner is generated entirely on your device in the browser. No settings, colours, or output ever leave your computer.