Progress

Give user feedback for status of the task
Import

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.

Color
Size
Radius
<Progress value={50} />

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 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';
SizeHeight
xs3px
sm5px
md8px
lg12px
xl16px

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