Progress
Progress displays the progress status for a task that takes a long time or consists of several steps.

For displaying indefinite progress status, check Loader component.

Usage

Progress is controlled by the value property which will define the width of the bar. By default, it works withing the 0-100 boundaries, which means that passing value={50} will set it to be exactly at the middle.

You can control these min and max boundaries in case your app needs them to be different.

Colors

Progress supports primary (default), critical and positive colors to be used in different contexts. These colors depend on your theme token values.

Accessibility

Progress should be labelled either by passing aria-labelledby attribute to it pointing to a text label or with aria-label attribute.

By default, Progress uses a scorebar role. In case you're using Progress with a different context like score bars, you can manually change this role by passing a role attribute with attributes property.

Properties

NameTypeDefaultRequiredComment
valuenumber0falseCurrent value
minnumber0falseStart boundary
maxnumber100falseEnd boundary
colorprimary, critical, positiveprimaryfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element