Radial Progress

radial-progress.scss ; radial-progress.js ;

Use the radial-progress module to illustrate progress on a ring.

Examples

Basic

<svg class="radial-progress" width="100" height="100" viewBox="0 0 100 100">
  <!-- The background is stricly optional, and is unaffected by the JS -->
  <circle class="radial-progress__background" cx="50" cy="50" r="45" fill="none" stroke-width="10" />
  
  <!--
    cx and cy should equal half the width of the SVG

    cx = cy = 100 / 2
    cx = cy = 50
  -->

  <!--
    The radius of the circle should equal:

    r = (width / 2) - (stroke-width / 2)
    r = (100 / 2) - (10 / 2)
    r = 50 - 5
    r = 45
  -->
  
  <!-- 
    stroke-dasharray and stroke-dashoffset should
    equal the circumference of the circle:

    C = 2 * PI * radius
    C = 2 * PI * 45
    C = 282.75
  -->
  <circle 
    class="radial-progress__ring js-radial-progress"
    data-radial-progress-percent="25" 
    cx="50" cy="50" r="45"
    fill="none" stroke-width="10" 
    stroke-dasharray="282.75" stroke-dashoffset="282.75"
  />
</svg>