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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle cx="400" cy="400" fill="none"
    r="200" stroke-width="50" stroke="#E387FF" />
</svg>

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)

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle cx="400" cy="400" fill="none"
    r="200" stroke-width="50" stroke="#E387FF"
    stroke-dasharray="700 1400" />
</svg>

stroke-linecap for round linecaps

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

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle cx="400" cy="400" fill="none"
    r="200" stroke-width="50" stroke="#E387FF"
    stroke-dasharray="700 1400"
    stroke-linecap="round" />
</svg>

stroke-dashoffset to control where our dash starts

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

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle cx="400" cy="400" fill="none"
    r="200" stroke-width="50" stroke="#E387FF"
    stroke-dasharray="700 1400"
    stroke-linecap="round"
    stroke-dashoffset="0" />
</svg>

Rotate the Circle Using CSS

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

<style>
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .spin {
    transform-origin: center;
    animation: spin 2s linear infinite;
  }
</style>
      
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle class="spin" cx="400" cy="400" fill="none"
    r="200" stroke-width="50" stroke="#E387FF"
    stroke-dasharray="700 1400"
    stroke-linecap="round" />
</svg>

Animate stroke-dasharray

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

<style>
  @keyframes progress {
    from {
      stroke-dasharray: 0 1400;
    }
    to {
      stroke-dasharray: 1257 1400;
    }
  }

  .progress {
    animation: progress 2s linear infinite;
    animation-direction: alternate;
  }
</style>
      
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle class="progress" cx="400" cy="400" fill="none"
    r="200" stroke-width="50" stroke="#E387FF"
    stroke-dasharray="700 1400"
    stroke-linecap="round" />
</svg>

Swirling Effect

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

<style>
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  
    @keyframes spin2 {
      0% {
        stroke-dasharray: 1, 800;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 400, 400;
        stroke-dashoffset: -200px;
      }
      100% {
        stroke-dasharray: 800, 1;
        stroke-dashoffset: -800px;
      }
    }
  
    .spin2 {
      transform-origin: center;
      animation: spin2 1.5s ease-in-out infinite,
        spin 2s linear infinite;
      animation-direction: alternate;
    }
  </style>
        
  <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
    <circle class="spin2" cx="400" cy="400" fill="none"
      r="200" stroke-width="50" stroke="#E387FF"
      stroke-dasharray="700 1400"
      stroke-linecap="round" />
  </svg>