An hourglass whose sand drains through the neck, then flips over and refills for the next round.
Maison Alba
Setting your table
Friday, 7:30 pm · 2 guests
Usually under a minute
npx shadcn@latest add https://hyperblur.dev/r/loader-hourglass.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-hourglass.tsx.
import { LoaderHourglass } from "@/components/hyperblur/loader-hourglass"
<LoaderHourglass size={64} label="Reserving your table" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Height of the loader in pixels. Width is two thirds of it. |
| color | string | "#7fb3ff" | Color of the sand and the falling stream. |
| accent | string | "#2f7bff" | Color of the glass outline and the caps. |
| speed | number | 3.6 | Seconds for one full cycle of draining and flipping. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |