Timer
<o-timer> is a countdown ring with start, pause and reset.
The time left is an <o-progress> on orbit-12 that shrinks back toward 12 o'clock. The buttons in the middle are real buttons inside the center capsule. The ring is redrawn in small steps rather than every frame, and the digits change once a second.
Attributes
| Attribute | Default | What it does |
|---|---|---|
duration | 60 | Length of the countdown: seconds (90 or 90s), m:ss or h:mm:ss. |
remaining | duration | Time left to start from, in the same formats. |
running | off | Present while the timer runs. Add it to start, remove it to pause. |
label | A caption under the time. It is also part of the accessible name. | |
warn | When the time left drops to this, the ring takes the warning color. | |
ticks | 0 | Marks around the inside of the ring, such as 60 or 12. |
controls | on | controls="false" hides the buttons, for a timer you drive from code. |
fill / track | #3da9fc / faint gray | Ring colors. |
thickness | 1.4 | Ring thickness in lanes. |
shape | rounded | Ending of the ring. |
size | 200px | Width of the widget. |
glow | off | A glow in the ring color. |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Properties, methods and events
| Name | What it does |
|---|---|
start(), pause(), toggle(), reset() | Control the countdown. start() after the end starts over. |
remaining | Seconds left. You can set it, also while running. |
running | true while counting down. Setting it starts or pauses. |
duration | Length in seconds. Setting it writes the attribute. |
start, pause, reset | Fire when the state changes. |
tick | Fires each time the shown second changes while running. |
done | Fires once when the time is up. |
The methods exist once the element is defined. A classic script that runs before the kit module can write running instead, or wait for customElements.whenDefined('o-timer').
Every event bubbles and carries remaining and duration in event.detail. While it runs, the element has the class is-running; near the end is-warning, and at zero is-done.
Styling
| Property | Default | What it does |
|---|---|---|
--ok-fill | #3da9fc | Ring and main button. |
--ok-track | faint gray | Track. |
--ok-timer-warn | #f59e0b | Ring color in the warning time. |
--ok-timer-done | #ef4565 | Ring color at zero. |
--ok-timer-button | --ok-fill | Background of the start and pause button. |
--ok-timer-button-text | #0c0f13 | Its icon color. |
--ok-timer-button-alt | translucent gray | Background of the reset button. |
--ok-tick | currentColor | Tick marks. |
--ok-font-size | 8cqmin | Base text size. |
More examples
A dial with a warning
Driven from code
A light pomodoro
Accessibility
The timer has role="timer" and a name like “Tea: 1:30 left of 1:30”. The ticking digits are not announced, which is how a timer should behave. When the time is up, a polite live region says so (“Tea: time is up”). The buttons are named Start, Pause, Resume and Reset as the state changes, and work with Enter and Space like any button.