UIBeginner

Cooldown Radial

The ability button goes dark and a radial sweep uncovers it — the player reads the wait at a glance and feels the exact moment it's back.

uicooldownabilitymobile

Examples

Captured from this page's own interactive demo below.

Overview

Every game with abilities has the same question on screen at all times: 'can I press this yet?' A radial cooldown answers it without words or numbers-only squinting — the button dims, a pie-shaped shadow sweeps away clockwise, and the remaining dark slice IS the remaining time. Players read it from the corner of their eye mid-fight, which a ticking number alone can't offer.

The magic moment is the last frame: when the sweep completes, don't just quietly restore the button. Flash it, pop the scale, ring a wavefront off its edge — the 'ready' beat is a reward and a call to action in one. In mobile games this single pop measurably drives ability usage: a button that celebrates its own readiness gets pressed.

Implementation is nearly free on every stack: Unity UI has Image.fillAmount with a Radial360 fill method, and the web has conic-gradient. The whole effect is one lerp from 0 to 1 plus a punch-scale on completion. Spend your effort on the details instead: dim the icon (not just the overlay), disable the hit area while cooling, and consider a subtle tick of the remaining seconds for abilities longer than ~3s.

Interactive Demo

the dark slice IS the remaining time — the pop announces ready

Cooldown1500ms

Ready Pop20%

Use Cases

Ability buttons in mobile action gamesBoosters and consumables on a HUDAttack or dash cooldowns shown on-screenTimed rewards and energy refills in meta screens

Best Practices

Do

✓Celebrate the ready moment — a flash plus a small scale pop turns the cooldown's end into a call to action.
✓Dim the icon itself while cooling, not just the overlay, and disable the button's hit area so taps don't silently fail.
✓Sweep clockwise from 12 o'clock — it's the direction every clock trained players to read.

Don't

✕Don't rely on a number alone — digits need focus, a shrinking slice reads peripherally.
✕Don't animate the fill with easing — cooldown progress is data, and a nonlinear sweep lies about the remaining time.
✕Don't stack more than one overlay style (slice + bar + number spinner) on a single small button; pick one.

Common Mistakes

⚠The overlay sweeps but the button stays tappable, eating inputs during cooldown and teaching players the UI is unreliable.
⚠A ready state identical to the cooling state minus the overlay — without a pop, players keep glancing to double-check.
⚠The radial resets instantly when the ability is used again, skipping the 'spent' beat — snap the fill to 0 with a tiny dip first.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Cooldown Radial" game-feel effect to my project: The ability button goes dark and a radial sweep uncovers it — the player reads the wait at a glance and feels the exact moment it's back.

How it works: Every game with abilities has the same question on screen at all times: 'can I press this yet?' A radial cooldown answers it without words or numbers-only squinting — the button dims, a pie-shaped shadow sweeps away clockwise, and the remaining dark slice IS the remaining time. Players read it from the corner of their eye mid-fight, which a ticking number alone can't offer.

Guidelines:
- Celebrate the ready moment — a flash plus a small scale pop turns the cooldown's end into a call to action.
- Dim the icon itself while cooling, not just the overlay, and disable the button's hit area so taps don't silently fail.
- Sweep clockwise from 12 o'clock — it's the direction every clock trained players to read.

Avoid:
- Don't rely on a number alone — digits need focus, a shrinking slice reads peripherally.
- Don't animate the fill with easing — cooldown progress is data, and a nonlinear sweep lies about the remaining time.
- Don't stack more than one overlay style (slice + bar + number spinner) on a single small button; pick one.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.