radial progress

by Marcos Moitas

HTML

<div class="demo">
	<svg class="progress" width="32" height="32" viewBox="0 0 32 32">
		<circle class="progress__value" cx="16" cy="16" r="14" stroke-width="2" />
	</svg>
</div>

SCSS

.demo {
  background: aqua;
}

.progress {
	transform: rotate(-90deg);
}

.progress__meter,
.progress__value {
	fill: none;
}

.progress__value {
	stroke: #f77a52;
	stroke-linecap: round;
}

JavaScript

var progressValue = document.querySelector('.progress__value');

var RADIUS = 14;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;

function progress(value) {
	var progress = value / 100;
	var dashoffset = CIRCUMFERENCE * (1 - progress);
	
	console.log('progress:', value + '%', '|', 'offset:', dashoffset)
	
	progressValue.style.strokeDashoffset = dashoffset;
}

progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(50);