Progress
Progress bars indicate operation completion, with support for determinate values, indeterminate state, sizes, colors, and striped patterns.
Basic
Determinate progress bars at various completion levels.
25%25%
50%50%
75%75%
100%100%
Indeterminate
Use when progress is unknown — omit the value prop.
Loading…
Sizes
Four sizes: xs, sm, md (default), and lg.
Extra Small
Small
Medium
Large
Colors
Four semantic color variants at 65% completion.
Primary65%
Success65%
Warning65%
Error65%
Striped
Add a diagonal stripe pattern with the striped prop — useful for active transfers.
Regular70%
Striped70%
Live Demo: Upload
Simulate a file upload with real-time progress animation over 3 seconds.
Ready to upload0%
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress percentage (0–100). Omit for indeterminate animation. |
label | string | — | Label shown above the track. |
showValue | boolean | false | Display the numeric percentage alongside the label. |
size | "xs" | "sm" | "md" | "lg" | "md" | Height of the progress track. |
color | "primary" | "success" | "warning" | "error" | "primary" | Fill color of the progress bar. |
striped | boolean | false | Applies a diagonal stripe overlay pattern. |
animated | boolean | false | Adds a pulse animation to the filled bar. |
rounded | boolean | true | Rounds the ends of the track and fill bar. |