Display progress relative to a limit or related to a task.
The basic Progress usage.
Modify the maximum value of progress.
You can specify the color of the progress in any range.
Split the bar in blocks with segments.
Use circular for a ring. The size follows width and scale.
We prepared some different styles in advance.
Say what is being sent and how far it is, and change the type when it finishes.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | current value | number | - | 0 |
| max | max value | number | - | 100 |
| fixedTop | fix progress to top | boolean | - | false |
| fixedBottom | fix progress to bottom | boolean | - | false |
| segments | split the bar in blocks | number | - | - |
| circular | show a ring instead of a bar | boolean | - | false |
| colors | custom colors | { [key: number]: string } | - | - |
| type | predefined state types | ProgressTypes | ProgressTypes | default |
| ... | native props | ProgressHTMLAttributes | 'aria-busy', ... | - |
type ProgressTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'