Making SVG Loading Spinners: An Interactive Guide

Drawing a Circle

We start by defining our workspace. The viewBox attribute controls the coordinate system. Here, 0 0 800 800 sets the origin at the top-left corner with a width and height of 800 units each.

We then create a circle element. The cx and cy attributes position the center of the circle at 400 units along both the x and y axes. A radius (r) of 200 units and a stroke width of 40 units give it a bold appearance. fill="none" ensures the circle is hollow, forming the basic shape of our spinner.

stroke-dasharray to make the circle incomplete

stroke-dasharray is a powerful attribute that controls the pattern of dashes and gaps in a shape's stroke.

For example, a value of 600 200 would mean dash of 600 units followed by a gap of 200 units. More than 2 values can be provided. A value of 600 200 400 100 would mean pattern consisting of a dash of 600 units, a gap of 200 units, a dash of 400 units and a gap of 100 units. The pattern of dashes and gaps repeats itself to fill up the entire shape's stroke length.

In the following example we set a large value for the gap, ensuring that only one dash will show. At a value of 0 for the dash, we get nothing visible (the gap takes up all the visible stroke), and at a value of 1257 (given a radius of 200) we get a full circle again. That's because the math for the circumference of a circle is 2 * π * radius (2 * 3.1416 * 200 = 1,256.64)

stroke-linecap for round linecaps

The round linecap adds a smooth finish to the stroke ends:

stroke-dashoffset to control where our dash starts

The stroke-dashoffset attribute allows us to offset the start of our dash:

Rotate the Circle Using CSS

Just a simple CSS animation to make our circle spin around its center continuously:

Animate stroke-dasharray

We can also animate the values for the stroke-dasharray attribute:

Swirling Effect

For this final example the animating dasharray and dashoffset values create a dynamic swirling effect: