프로그레스 링

<div class="wrap">
  <div class="pr" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-live="polite">
    <svg viewBox="0 0 60 60" aria-hidden="true"><circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" stroke-width="5"/><circle class="prc" cx="30" cy="30" r="26" fill="none" stroke="var(--accent-3)" stroke-width="5" stroke-linecap="round"/></svg>
    <span class="prn">0%</span>
  </div>
  <span class="cap">stroke-dashoffset = 둘레 &times; (1 &minus; 진행률)</span>
</div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.pr{position:relative;width:clamp(46px,15vmin,84px);height:clamp(46px,15vmin,84px);display:grid;place-items:center}
.pr svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.prc{stroke-dasharray:163.4;transition:stroke-dashoffset .25s linear}
.prn{font-size:clamp(11px,3.2vmin,16px);font-weight:700;font-variant-numeric:tabular-nums}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

const C = 163.4;
const circle = document.querySelector('.prc');
const num = document.querySelector('.prn');
const wrap = document.querySelector('.pr');
let pct = 0;
function tick() {
  pct = (pct + 2) % 101;
  circle.style.strokeDashoffset = String(C * (1 - pct / 100));
  num.textContent = pct + '%';
  wrap.setAttribute('aria-valuenow', String(pct));
}
tick();
setInterval(tick, 60);