← Design system
Progress
Interactive examples and usage for the Progress component.
Examples
25% 25%
50% 50%
75% 75%
Complete 100%
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value (0-100) |
max | number | 100 | Maximum value |
size | 'sm' | 'md' | 'lg' | 'md' | Bar thickness |
variant | 'primary' | 'success' | 'warning' | 'error' | 'primary' | Color variant |
indeterminate | boolean | false | Show indeterminate animation |
label | string | undefined | Accessible label |
showValue | boolean | false | Display the numeric value |
circular | boolean | false | Render as a circular progress indicator |