<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
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.