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:
We can also animate the values for the stroke-dasharray attribute:
For this final example the animating dasharray and dashoffset values create a dynamic swirling effect: