How to use it
- Enter hours, minutes and seconds, or press one of the presets from 1 to 15 minutes.
- Start begins the countdown; Pause holds it and Resume picks up where it stopped.
- At zero the digits turn green and a chime plays. Reset puts the timer back to the time you set.
The chime
There is no audio file. The signal is three short sine tones generated through the Web Audio API with a soft envelope, which is why it does not click and why the page has nothing to download. Browsers only allow sound after a user gesture, so the audio context is unlocked when you press Start — if you never press it, nothing can play.
Keep the tab open for the chime to fire. A browser may throttle timers in a background tab, and the remaining time is recomputed from the real end moment rather than counted down tick by tick, so the countdown stays correct even if the tab was asleep.
The ring
- It empties in proportion to the time left, so a glance tells you roughly how far along you are.
- Only stroke-dashoffset moves, which keeps the animation off the main thread.
- At zero both the ring and the digits turn green — the colour this design system reserves for something live.
Questions
Will it make a sound when the time is up?
Yes, three short tones generated in the browser. They only work if you started the timer by pressing the button, because browsers block audio that nobody asked for.
Can I pause and carry on?
Press Pause and the remaining time is held; the button then reads Resume and continues from that point.
Does the countdown survive switching tabs?
The remaining time is calculated from the moment the timer should end, so it is correct when you come back. The chime may be late if the browser put the tab to sleep.
What is the longest time I can set?
99 hours, 59 minutes and 59 seconds. Beyond that a timer in a browser tab is the wrong tool.
