ProgressBar

Basic ProgressBar

Display progress by using a percentage (0-100) as value.

Changes between values are animated.

Max value

You can set a max value and the percentage will be calculated for you.

Custom label

Any content passed in as children will be displayed as a label (instead of a percentage).

Hide label

Hide label with hideLabel (adds a title for hover tooltip).

Sizes

Choose a size: 'small' or 'large' ('medium' is default).

Colors

Theme

By default, the progress bar will follow the current color theme (and mode).

To theme a single ProgressBar, you can apply the theme class directly.

State

New in 6.6

Alternatively, use the state prop to explicitly set a color:

Loading

New in 6.9

loading prop adds animated barbershop-style stripes to indicate that progress is ongoing.

Disabled