Widgets
Timer
Counts down from a few minutes, then chimes. For tea, study sessions and anything that needs a nudge.
Installation
npx sinaui add timerCopy src/lib/ui/Widget.svelte, src/lib/ui/Timer.svelte, chime.ts, RollingNumber.svelte, Button.svelte, announce.ts and tokens.css. No dependencies.
Examples
A study session
Drag the ruler (or swipe, or use the arrow keys) to set minutes, then start. While it runs, the ruler slides back toward zero. When it ends, it chimes and the tab title says so.
<script lang="ts">
import Timer from '#lib/ui/Timer.svelte';
</script>
<Timer label="Study timer" minutes={15} />Props
| Prop | Type | Default |
|---|---|---|
minutes | number: starting length | 15 |
max | number: longest, in minutes | 60 |
label | string | 'Timer' |
locale | string | 'en' |
Accessibility
- The time left is not read aloud as it counts; “Time’s up” is announced at once when it ends.
- The ruler is a slider named “Length” and read in minutes; arrow keys move it one minute, Page Up and Page Down five.
- With reduced motion, nothing breathes or pulses.