쿨다운 링

<div class="crrow">
<div class="crslot"><div class="cricon"></div><div class="crring" id="r1"></div><div class="crnum" id="n1">3</div></div>
<div class="crslot"><div class="cricon i2"></div><div class="crring" id="r2"></div><div class="crnum" id="n2">1</div></div>
<div class="crslot"><div class="cricon i3"></div><div class="crring" id="r3"></div><div class="crnum" id="n3"></div></div>
</div>

.crrow{display:flex;gap:clamp(10px,5vmin,20px)}
.crslot{position:relative;width:clamp(38px,15vmin,64px);height:clamp(38px,15vmin,64px);border-radius:12px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.cricon{position:absolute;inset:18%;border-radius:6px;background:var(--accent)}
.i2{background:var(--accent-2)}
.i3{background:var(--accent-3)}
.crring{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.62) var(--p,0deg),transparent 0)}
.crnum{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(12px,4.6vmin,18px) monospace;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}

function makeRing(ringId,numId,durationMs,startDelay){
  const ring=document.getElementById(ringId);
  const num=document.getElementById(numId);
  function run(){
    const start=performance.now();
    function step(now){
      const p=Math.min(1,(now-start)/durationMs);
      const deg=(1-p)*360;
      ring.style.setProperty('--p', deg+'deg');
      num.textContent = p<1 ? Math.ceil((1-p)*(durationMs/1000)) : '';
      if(p<1) requestAnimationFrame(step);
      else setTimeout(run, 600);
    }
    requestAnimationFrame(step);
  }
  setTimeout(run, startDelay);
}
makeRing('r1','n1',3000,200);
makeRing('r2','n2',1600,900);
document.getElementById('r3').style.setProperty('--p','0deg');