Progress Bar
The Progress Bar component visually represents the completion state of a task or process.
Usage
Default
<Progressbar progress={65} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | 0 | Current progress value as a percentage (0–100). |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | configured Default | Theme color variant for the progress bar. |
| state | "success" | "error" | "warning" | - | Optional state variant for emphasis. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Height and thickness of the progress bar. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the progress bar. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Box shadow for the progress bar. |
| animated | boolean | true | If true, progress changes are smoothly animated. |
| indeterminate | boolean | false | If true, shows an indeterminate loading animation. |
| ariaLabel | string | "Progress" | Accessible label for screen readers. |
| className | string | - | Custom class name for the progress bar container. |
| data-testid | string | "progressbar" | Test id for querying the component in tests. |