Making SVG Loading Spinners: An Interactive Guide
What is an SVG Loading Spinner?
An SVG loading spinner is a visual cue that content is loading or data is being fetched. It is built from a simple SVG circle with fill="none", styled using stroke-dasharray (to create a dashed arc instead of a full circle), stroke-linecap (for rounded ends), and optionally stroke-dashoffset (to offset where the dash starts). CSS animation rotates the circle or animates the stroke values. SVG spinners are practical, scalable, and lightweight—no images, no extra fonts. They improve user experience by indicating that something is happening.
Features for Developers
An interactive guide that walks you through building SVG spinners step by step.
Start with a circle, add stroke-dasharray, stroke-linecap, stroke-dashoffset. Each step has a live example.
Tweak values and see the spinner update. Understand how each attribute affects the visual result.
Learn to rotate the circle and animate stroke-dasharray. Choose easing: linear, ease-in, ease-out, ease-in-out.
Combine animating dasharray and dashoffset for a dynamic swirling spinner effect.
Copy the generated SVG and CSS. Paste into your project. Adapt colors, sizes, and timing.
SVG spinners scale to any size without quality loss. Perfect for loading states and data fetching UI.
How To Make an SVG Spinner
Build a spinner in a few steps.
Create an SVG circle with fill="none" and a stroke. Position it with cx, cy, r. This is your spinner base.
Set stroke-dasharray to create one dash and one gap. The dash length (e.g., 600) plus gap controls the visible arc. Circumference ≈ 2πr for a full circle.
Add CSS animation. Rotate the circle, or animate stroke-dasharray and stroke-dashoffset for swirling effects.
Tips for SVG Spinners
Get the most out of the guide.
Use stroke-linecap="round" for smooth spinner ends. Looks better than butt or square.
For radius r, circumference = 2 × π × r. Use this to control dash length for full or partial arcs.
Try ease-in-out for a natural feel. Linear for a constant spin. The guide lets you compare.
Great For Developers and Designers
Who benefits from this guide?
Add loading spinners to buttons, tables, and async UI.
Understand how spinners work for specs and handoff.
Learn SVG stroke attributes and CSS animation together.
Build consistent spinner components with full control.
Why Use SVG Spinners?
Practical, scalable, and easy to style.
SVG scales to any size. No blur on retina or large displays.
No images. Small markup and CSS. Fast to load.
Change color, size, speed via CSS. Match your brand.
Pair with aria attributes for screen readers and reduced motion.
Technical Details
What the guide covers.
viewBox, circle (cx, cy, r), stroke-dasharray, stroke-dashoffset, stroke-linecap. fill="none" for hollow circle.
CSS transform rotate, stroke-dasharray animation, stroke-dashoffset. Easing: linear, ease-in, ease-out, ease-in-out.
Classic rotating spinner, animated dasharray, swirling effect with dasharray + dashoffset.
Frequently Asked Questions
Have questions? We have answers.