Animated SVG Spinners

One of the most common real-world uses for SVG animation is creating loading spinners and progress indicators. Because SVGs are lightweight and resolution-independent, they look great on any screen.

Method 1: The "Pulsing Dots" Spinner

This is easily achieved with the <animate> tag by targeting the opacity or r (radius) of several circles and offsetting their begin times:

View Output

Method 2: The Rotating Ring

This classic "spinner" effect uses two circles. The stroke of the foreground circle is broken into segments using stroke-dasharray and then rotated continuously using CSS:

View Output

Method 3: The Drawing Effect

By animating the stroke-dashoffset property, you can make a path appear as if it's being drawn or written in real-time. This is often used for "Success" checkmarks or logo animations:

View Output

To use this effect:

  1. Set stroke-dasharray to the total length of the path.
  2. Set stroke-dashoffset to that same length (this hides the path).
  3. Animate the stroke-dashoffset down to 0 to "draw" the path.