components / timer-ring
timer-ring.
circular progress ring driven by stroke-dasharray. takes a value/max pair, or an endsAt deadline it counts down to on its own clock, with the remaining time in the center.
00:45
68%
installation
bunx @justin06lee/chrome@latest add timer-ringprops
| name | type | default | description |
|---|---|---|---|
| value | number | 0 | determinate value; ignored in countdown mode. |
| max | number | 100 | upper bound for value. |
| endsAt | number | Date | - | countdown target. setting it makes the ring tick itself once a second. |
| startedAt | number | Date | mount time | the 0% anchor for a countdown; given only endsAt, the ring starts empty at mount. |
| size | number | 128 | outer edge in px. |
| thickness | number | 2 | stroke width in px. |
| accent | string | '#fff' | css color for the progress arc. |
| label | ReactNode | - | center slot. defaults to the remaining time (countdown) or a percentage; pass null for a bare ring. |
| onComplete | () => void | - | fired once when a countdown reaches endsAt; re-arms if endsAt changes. |
| direction | 'fill' | 'drain' | 'fill' | 'drain' empties the arc as time runs out. |
| ariaLabel | string | - | |
| className | string | - |