Widgets
Stopwatch
Times something to the hundredth of a second, with laps: fastest and slowest marked.
Installation
npx sinaui add stopwatchCopy src/lib/ui/Widget.svelte, src/lib/ui/Stopwatch.svelte, Button.svelte, announce.ts and tokens.css. No dependencies.
Examples
Timing an experiment
Start, then Lap as you go. With three laps or more, the fastest and slowest are marked. It keeps exact time even in a background tab.
<script lang="ts">
import Stopwatch from '#lib/ui/Stopwatch.svelte';
</script>
<Stopwatch label="Experiment timer" />Props
| Prop | Type | Default |
|---|---|---|
label | string: names it for screen readers | 'Stopwatch' |
locale | string | 'en' |
Accessibility
- The running time is never read aloud as it changes; stopping and each lap are announced.
- Start and Stop share one button, as do Lap and Reset, so nothing moves under a finger.
- Laps are a numbered list, newest first.