Progress

Usage

Progress component has one required prop value – filled bar width in %. You can change bar color by passing color prop, by default theme.primaryColor will be used. If you set striped prop to true bar will have stripes.

<Progress value={50} />

Multiple sections

You can display multiple sections instead of a single progress bar. Note that in this case value prop will be ignored:

<Progress
  size="xl"
  sections={[
    { value: 40, color: 'cyan' },
    { value: 20, color: 'blue' },
    { value: 15, color: 'indigo' },
  ]}
/>

Colors

In previous examples colors from theme.colors were used, but any other css colors can be used instead:

<Progress
  sections={[
    { value: 40, color: '#68b5e8' },
    { value: 15, color: '#6888e8' },
    { value: 15, color: '#8468e8' },
  ]}
/>

Example

Password strength meter example with Progress component:

Size

Size controls progress bar height. Progress has predefined sizes: xs, sm, md, lg, xl. Alternatively, you can use a number to set height in px:

<Progress size="sm" /> // -> predefined small size
<Progress size={50} /> // -> { height: 50 }

Radius

Radius controls border-radius of body and filled part. xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use a number to set radius in px:

<Progress radius="lg" /> // -> theme predefined large radius
<Progress radius={10} /> // -> { borderRadius: 10 }

With label

<Progress value={75} label="75%" size="xl" radius="xl" />
<Progress
  mt="md"
  size="xl"
  radius="xl"
  sections={[
    { value: 30, color: 'pink', label: 'Documents' },
    { value: 30, color: 'grape', label: 'Apps' },
    { value: 25, color: 'violet', label: 'Other' },
  ]}
/>

Accessibility

• Progress bar element has role="progressbar" attribute
• Progress bar element has aria-valuenow attribute with current value
• aria-valuemin and aria-valuemax attributes are always set to 0 and 100 as component does not support other values

Provide aria-label attribute to label progress:

<Progress aria-label="Uploading progress" value={10} />