Countdown Ring Timer

<div class="cdr"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="44" fill="none" stroke="#eceef3" stroke-width="8"/><circle class="cdr-p" id="cdrP" cx="50" cy="50" r="44" fill="none" stroke="#ff477e" stroke-width="8" stroke-linecap="round"/></svg><span class="cdr-n" id="cdrN">10</span></div>
<button class="cdr-btn" id="cdrBtn">Restart</button>

body{background:#f6f7fa;flex-direction:column;gap:16px}
.cdr{position:relative;width:130px;height:130px}
.cdr svg{transform:rotate(-90deg);width:100%;height:100%}
.cdr-p{stroke-dasharray:276;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.cdr-n{position:absolute;inset:0;display:grid;place-items:center;font:800 40px/1 system-ui,sans-serif;color:#1a1f36}
.cdr-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a1f36;border:0;border-radius:10px;padding:10px 22px;cursor:pointer}

var p=document.getElementById('cdrP'),n=document.getElementById('cdrN'),T=10,C=276,t;
function start(){var left=T;n.textContent=left;p.style.transition='none';p.style.strokeDashoffset='0';void p.offsetWidth;p.style.transition='stroke-dashoffset 1s linear';clearInterval(t);t=setInterval(function(){left--;n.textContent=left;p.style.strokeDashoffset=(C-C*left/T)+'';if(left<=0){clearInterval(t);n.textContent='✓'}},1000);p.style.strokeDashoffset=(C-C*(T-1)/T)+''}
document.getElementById('cdrBtn').onclick=start;start();