Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

React

Value

Pass a value and optionally pass a max value (max defaults to 100).

Size

There are two ways you can increase the height of the progress bar:

• You can add size prop to increase the height of the progress bar.
• You can also use the height prop to manually set a height.

Color

You can add colorScheme prop to any progress bar to apply system color scheme.

Animated

To show an animated progress, pass the isAnimated prop.

Indeterminate

To show an indeterminate progress, pass the isIndeterminate prop.

Accessibility

• 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.