Progress

Usage

Use Progress to display progress of action that takes long time or includes multiple steps.

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 stipes.

<Progress value={50} />

Multiple sections

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

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

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 }

You can get default sizes by importing PROGRESS_SIZES:

import { PROGRESS_SIZES } from '@mantine/core';

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 }

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} />