Progress is used to display the progress status for a task that takes a long
time or consists of several steps.
You can add hasStripe prop to any progress bar to apply a stripe via a CSS
gradient over the progress bar’s background color.
There are two ways you can increase the height of the progress bar:
size prop to increase the height of the progress bar.height prop to manually set a height.You can add colorScheme prop to any progress bar to apply any color that
exists in the theme.
To show an animated progress, pass the isIndeterminate prop.
Progress has a role set to progressbar to denote that it is a progress.Progress has aria-valuenow set to the percentage completion value passed
to the component, to ensure the progress percent is visible to screen readers.| Name | Type | Description | Default |
|---|---|---|---|
| colorScheme | string | - | |
| css | Interpolation<{}> | The emotion's css style object | - |
| hasStripe | boolean | If `true`, the progress bar will show stripe | - |
| isAnimated | boolean | If `true`, and hasStripe is `true`, the stripes will be animated | - |
| isIndeterminate | boolean | If `true`, the progress will be indeterminate and the `value` prop will be ignored | - |
| max | number | The maximum value of the progress | - |
| min | number | The minimum value of the progress | - |
| orientation | "horizontal" | "vertical" | - | |
| size | string | - | |
| styleConfig | Record<string, any> | - | |
| value | number | The `value` of the progress indicator. If `undefined` the progress bar will be in `indeterminate` state | - |
| variant | string | - |