Progress

Give user feedback for status of the task
Import

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.

Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
<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:

Strong password should include letters in lower and uppercase, at least 1 number, at least 1 special symbol

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

75%
Documents
Apps
Other
<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} />
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback