<div class="demo">
	<svg class="progress" width="120" height="120" viewBox="0 0 120 120">
		<circle cx="60" cy="60" r="54" fill="none" stroke="#ffffff" stroke-width="3" stroke-opacity="0.4" />
		<circle class="progress__value" cx="60" cy="60" r="54" fill="none" stroke="#ffffff" stroke-width="2" transform="rotate(-90 60 60)" />
	</svg>
</div>
body {
  background: black;
}

.progress__value {
	stroke-dasharray: 339.292;
	stroke-dashoffset: 339.292;
	animation: progress 5s;
}

@keyframes progress {
	from {
		stroke-dashoffset: 339.292;
	}
	to {
		stroke-dashoffset: 0;
	}
}
View Compiled
/*

Blatantly stolen from:
https://codepen.io/xgad/pen/15372d14cd8ded6e9fbe4a4e7df76dbf
https://codepen.io/xgad/post/svg-radial-progress-meters

*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.