Progress

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

Import#

Usage#

Editable Example

Progress with Stripe#

You can add hasStripe prop to any progressbar to apply a stripe via a CSS gradient over the progress bar’s background color.

Editable Example

Progress sizes#

There are two ways you can increase the height of the progressbar:

  • You can add size prop to increase the height of the progressbar.
  • You can also use the height prop to manually set a height.
Editable Example

Progress color scheme#

You can add colorScheme prop to any progressbar to apply any color that exists in the theme.

Editable Example

Animated Progress#

To show an animated progress, pass the isIndeterminate prop.

Editable Example

Accessibility#

  • Progress has a role set to progressbar to denote that it's 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.
Edit this page

Made byChakraandRock Content