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.

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

function Demo() {
  return <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:

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

function Demo() {
  return (
    <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:

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

function Demo() {
  return (
    <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

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

function Demo() {
  return (
    <>
      <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} />