Progress
How far a task has got: a bar or a ring, determinate or indeterminate.
import { Progress, ProgressCircle } from "pleate/progress";Bars and rings
Offline maps
- Lisbon18%
- PortoWaiting
- Sintra64 MB
Trip budget€640 of €1,000
72%
18 of 25 items packed
Props
- value
Current amount; null shows an indeterminate bar.
number | nulldefault none- max
Value that counts as complete.
numberdefault 100- tone
Fill color.
"accent" | "success" | "warning" | "danger" | "neutral"default "accent"- Progress size / label / valueLabel
Bar height, caption, value text.
"sm" | "md" | "lg" / ReactNode / ReactNode | true- ProgressCircle size
Diameter in px.
numberdefault 48- ProgressCircle thickness
Ring stroke in px.
numberdefault 4- ProgressCircle children
Content in the center.
ReactNode