Components
Liquid Progress
The iOS progress bar, download ring and activity indicator.
Installation
npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-progress.jsonUsage
import { LiquidProgress, LiquidProgressRing, LiquidSpinner } from "@/components/ui/liquid-progress"
<LiquidProgress value={42} aria-label="Upload" />
<LiquidProgressRing value={42} aria-label="Download" />
<LiquidSpinner />Pass value={null} while there's nothing to measure yet, the bar sweeps and the ring spins. The fill eases to each new value, so steady updates read as one smooth motion.
Examples
Uploads
Adding to “Trips”0 of 3
<LiquidProgress value={sent} max={size} size="small" aria-label={`Uploading ${name}`} />Pass max to count in your own units, here megabytes.
Downloads
{waiting && <LiquidProgressRing value={null} />}
{loading && (
<button aria-label="Stop download" onClick={stop}>
<LiquidProgressRing value={progress} />
</button>
)}The ring's centre shows a stop square by default. Pass children to draw something else.
Activity indicator
Loading messages…
<LiquidSpinner aria-label="Loading messages" />API
| Component | Props |
|---|---|
LiquidProgress | value (null), max (100), size ("regular"), tint |
LiquidProgressRing | value (null), max (100), size (28), tint, children |
LiquidSpinner | size (20), aria-label ("Loading") |
The bar and ring are progressbars, give each one an aria-label. The spinner is a status.