Animated Donut

<!-- Animated Donut · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dnt"><svg class="dnt-svg" viewBox="0 0 120 120"><circle class="dnt-tr" cx="60" cy="60" r="48"/><circle class="dnt-vl" cx="60" cy="60" r="48"/></svg><div class="dnt-mid"><span class="dnt-pct">0%</span><span class="dnt-sub">Voltooid</span></div><div class="dnt-lab">Sprintvoortgang</div></div>
</div>

/* Animated Donut · NedDev · eigen werk. */
.dnt{position:relative;width:200px;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'Switzer',sans-serif}
.dnt-svg{width:160px;height:160px;transform:rotate(-90deg)}
.dnt-tr{fill:none;stroke:rgba(10,10,10,.1);stroke-width:12}
.dnt-vl{fill:none;stroke:#F5480F;stroke-width:12;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;transition:stroke-dashoffset 1.2s cubic-bezier(.6,.05,.1,1)}
.dnt-mid{position:absolute;top:38px;left:0;right:0;display:flex;flex-direction:column;align-items:center}
.dnt-pct{font-size:30px;font-weight:800;color:#0a0a0a;font-variant-numeric:tabular-nums}.dnt-sub{font-size:11px;font-weight:600;color:rgba(10,10,10,.5)}
.dnt-lab{font-size:12px;font-weight:600;color:rgba(10,10,10,.6)}

// Animated Donut · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.dnt')||root;var vl=root.querySelector('.dnt-vl'),pctEl=root.querySelector('.dnt-pct');var C=2*Math.PI*48,target=72,reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;function go(){vl.style.strokeDashoffset=C*(1-target/100);if(reduce){pctEl.textContent=target+'%';return;}var t0=performance.now();(function tick(t){var p=Math.min((t-t0)/1200,1),e=1-Math.pow(1-p,3);pctEl.textContent=Math.round(target*e)+'%';if(p<1)requestAnimationFrame(tick);})(t0);}var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){go();io.disconnect();}});},{threshold:.4});io.observe(root);
}
init(document.querySelector('.jouw-container'));