Design Atlas
한국어
◆ Game UI & game feel

Cooldown Ring

쿨다운 링

A dark radial wedge over a skill icon that sweeps away like a clock hand, showing exactly how much cooldown remains.

Also known as: 스킬 쿨타임 표시Radial cooldown쿨타임 링
···
html
<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>
css
.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)}
js
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');

Cooldown rings are usually a single conic-gradient: convert the remaining fraction into an angle (0–360deg), paint that wedge dark and the rest transparent, and you get a clockwise-sweeping mask. Pairing it with a numeric countdown means the number answers "how long," and the ring's shape answers "can I use it right now" at a glance.

The moment the ring finishes clearing and the skill becomes usable again deserves its own beat — a quick flash or an edge glow — because the ring simply disappearing is easy to miss as a "ready now" signal. With several skill slots side by side, players compare ring shapes rather than reading numbers one by one to decide what to do next.

An SVG progress ring using stroke-dashoffset around the icon's border is a common alternative to the wedge mask. Either way, the sweep direction (clockwise vs. counter-clockwise) and starting angle (12 o'clock vs. 3 o'clock) should stay consistent with any other radial gauges in the same game, or they read as contradictory.

When to use

Any skill or item slot with a reuse delay. Unnecessary for a basic attack that’s always ready.