SVG_circle_progress_bar

index.html

<svg class="progress-bar" width="120" height="120">
	<circle class="progress-bar__circle" stroke="#ff6e00" stroke-width="4" cx="60" cy="60" r="52" fill="transparent"/>
</svg>

<input type="number" id="inputPercent" value="0">

script.js

const circle = document.querySelector('.progress-bar__circle');
const radius = circle.r.baseVal.value;
// console.log(circle.r);
const circumference = 2*Math.PI * radius;
let inputPercent = document.getElementById('inputPercent');
console.log(inputPercent);

inputPercent.addEventListener('change', function() {
	setProgressBar(inputPercent.value);
});

circle.style.strokeDasharray  = `${circumference} ${circumference}`;
circle.style.strokeDashoffset  = circumference;

function setProgressBar(percent) {
	let offset = circumference - percent / 100 * circumference;
	circle.style.strokeDashoffset = offset;
}

style.css

html,
body {
	display: flex;
	justify-content: center;
	height: 100vh;
	align-items: center;
	background-color: #43a047;
}
.progress-bar__circle {
	transform-origin: center;
	transform: rotate(-90deg);
	transition: stroke-dashoffset 500ms;
}

svg_circle_progress_bar.markdown

SVG_circle_progress_bar

A Pen by artemijeka on CodePen.

License.