Progress

Progress displays the progress status for a task that takes a long time or consists of several steps.
Announces progress for screen readers
Similar components:
Loader


Usage

Progress is controlled by the value property which will define the width of the bar. By default, it works within the 0-100 boundaries, which means that passing value={50} will make the bar cover half of the component width.

You can control these min and max boundaries in case you're working with value data sets that, for example, don't start at 0.

Sizes

Progress comes in 2 sizes, medium (default) and small.

  • medium size is usually used for standalone progress or score bars.
  • small progress bar can be easily embedded into groups of elements, like in media players.

Colors

Progress supports primary (default), critical, positive and white colors to be used in different contexts.

white progress bar stays white in both light and dark mode and is perfect for displaying progress on top of media content. For instance, you can use it for the video or audio player.

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
sizesmall, mediummediumfalse
colorprimary, critical, positive, whiteprimaryfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
Previous
Next