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> Copy