Mar 31, 2026

Drawing a progress indicator around the circumference of a circle? Check out this old SVG trick. Use stroke-dasharray which expects a dash pattern, but you set it to the circumference. Then set stroke-dashoffset as the percentage of the progress against the circumference.

<svg height="320" width="320">

  <!-- Track -->
  <circle 
    cx="160" 
    cy="160" 
    fill="none" 
    r="150" 
    stroke="#1a1a1a1a" 
    stroke-width="12" />

  <!-- Line -->
  <!-- Dash array === Circumference === 2 * Math.PI * Radius -->
  <!-- Dash offset === Circumference * ( 1 - Progress ) -->
  <!-- Transform (not CSS) puts start at noon -->
  <circle 
    cx="160" 
    cy="160" 
    fill="none" 
    r="150" 
    stroke-dasharray="943"
    stroke-dashoffset="330"
    stroke="#1a1a1a" 
    stroke-linecap="round"      
    stroke-width="12"
    transform="rotate( -90 160 160 )" /> 

</svg>