A progress pill filled with liquid: the leading edge sloshes as a live wave and bubbles rise inside. The percentage changes color exactly where the liquid passes under it.
launch-film-final.mov
1.8 GB · to Campaigns / Autumn
npx shadcn@latest add https://hyperblur.dev/r/loader-liquid-progress.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-liquid-progress.tsx.
import { LoaderLiquidProgress } from "@/components/hyperblur/loader-liquid-progress"
<LoaderLiquidProgress value={progress} label="Uploading launch-film.mov" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled progress from 0 to 100. Leave it out and the loader runs its own looping demo progress. | |
| color | string | "#2f7bff" | Main color of the liquid. |
| accent | string | "#7fb3ff" | Color of the wave edge and the end of the gradient. |
| height | number | 30 | Height of the pill in pixels. |
| duration | number | 6000 | Milliseconds for one demo loop when value is not set, with realistic stalls. |
| showValue | boolean | true | Shows the percentage inside the pill. |
| label | string | Caption above the pill, also used as the accessible name. |