Countdown Ring

<!-- Countdown Ring · Bron: CSS-Tricks · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="cdr-wrap"><svg class="cdr-svg" viewBox="0 0 120 120"><circle class="cdr-track" cx="60" cy="60" r="52"/><circle class="cdr-bar" cx="60" cy="60" r="52"/></svg><span class="cdr-num">10</span><span class="cdr-hint">klik = reset</span></div>
</div>

/* Countdown Ring · Bron: CSS-Tricks · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cdr-wrap{position:relative;width:140px;height:140px;cursor:pointer;font-family:'JetBrains Mono',monospace}
.cdr-svg{width:140px;height:140px;transform:rotate(-90deg)}
.cdr-track{fill:none;stroke:rgba(10,10,10,.10);stroke-width:8}
.cdr-bar{fill:none;stroke:#F5480F;stroke-width:8;stroke-linecap:round;stroke-dashoffset:0;transition:stroke .3s}
.cdr-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);font-size:34px;font-weight:600;color:#0a0a0a}
.cdr-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:'Switzer',system-ui,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.35)}

// Countdown Ring · Bron: CSS-Tricks · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.cdr-wrap')||root;var bar=root.querySelector('.cdr-bar'),num=root.querySelector('.cdr-num');var C=2*Math.PI*52,DUR=10000,start=0,raf;function tick(t){if(!start)start=t;var e=t-start;var p=Math.min(1,e/DUR);bar.style.strokeDashoffset=(C*p).toFixed(1);var rem=Math.ceil((DUR-e)/1000);num.textContent=Math.max(0,rem);bar.style.stroke=rem<=3?'#0a0a0a':'#F5480F';if(p<1)raf=requestAnimationFrame(tick);}bar.style.strokeDasharray=C.toFixed(1);root.addEventListener('click',function(){cancelAnimationFrame(raf);start=0;bar.style.strokeDashoffset='0';bar.style.stroke='#F5480F';raf=requestAnimationFrame(tick);});raf=requestAnimationFrame(tick);
}
init(document.querySelector('.jouw-container'));