Widgets
Hourglass
A sand timer: flip it and the sand runs down. A calmer way to show time passing.
Installation
npx sinaui add hourglassCopy src/lib/ui/Widget.svelte, src/lib/ui/Hourglass.svelte, Button.svelte, Segmented.svelte, RollingNumber.svelte, chime.ts, announce.ts and tokens.css. No dependencies.
Examples
A sand timer
Flip to start. Flip again part way and it turns over as a real one would: the sand that had fallen becomes the time left.
<script lang="ts">
import Hourglass from '#lib/ui/Hourglass.svelte';
</script>
<Hourglass label="Sand timer" seconds={60} />Props
| Prop | Type | Default |
|---|---|---|
seconds | number | 60 |
presets | number[]: minutes | [1, 3, 5] |
label | string | 'Hourglass' |
locale | string | 'en' |
Accessibility
- The glass is a picture named with the time left; the time is also written under it.
- Running out is announced and chimes; the time is never read aloud as it counts.
- With reduced motion, the glass turns over at once and the falling sand holds still.