How far a task has got — an import, a sync, an onboarding checklist. The linear bar takes its label above or beside it with the value in mono; ProgressCircle is the same measure as a ring where a bar would not fit. Pass null while the total is unknown and the bar slides instead. For a share of a whole that is not a task, use Meter; for loading content, Skeleton.
import { Progress, ProgressCircle } from "@puckoops/camelot";| Name | Description | Default | Control |
|---|---|---|---|
| value* | null for unknown number | null | - | 010064 |
| max | number | 100 | |
| label | ReactNode | - | |
| labelPosition | top puts the label and value above the bar; side puts them in one row with it. "top""side" | "top" | |
| showValue | boolean | true | |
| format | (value: number, max: number) => string | defaultFormat | - |
| size | "thin""default" | "default" | |
| className | string | - | |
| aria-label | string | - |
Use Progress for work that finishes: an import, a sync, an onboarding checklist. Label it with the task and let the value read in mono. ProgressCircle fits where a bar would not, such as a card corner. Pass null while the total is unknown. Never use either for content that is loading; that is Skeleton.
One row, with a count instead of a percentage.
While the total is unknown the bar slides; with reduced motion it rests as a quiet full bar.
4px without a label, inside a row; the value stays at the end.
The fill moves by transform as the value changes.
Small beside text, medium alone, large with the value inside, and indeterminate.
Top and side labels, unknown, thin and complete, and the three ring sizes.