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
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' },
]}
/>
);
}

Sections props

You can add any additional props to sections:

Hovered section: none
import { useState } from 'react';
import { Progress, Text } from '@mantine/core';
function Demo() {
const [hovered, setHovered] = useState(-1);
const reset = () => setHovered(-1);
return (
<>
<Progress
onMouseLeave={() => setHovered(-1)}
size="xl"
sections={[
{ value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
{ value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
{ value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
]}
/>
<Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
</>
);
}

Sections tooltips

Add tooltip property to section to display floating Tooltip when user hovers over it:

Documents
Apps
Other
import { Progress } from '@mantine/core';
function Demo() {
return (
<Progress
radius="xl"
size={24}
sections={[
{ value: 33, color: 'pink', label: 'Documents', tooltip: 'Document – 33 Gb' },
{ value: 28, color: 'grape', label: 'Apps', tooltip: 'Apps – 28 Gb' },
{ value: 25, color: 'violet', label: 'Other', tooltip: 'Other – 25 Gb' },
]}
/>
);
}

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:

With label

75%
Documents
Apps
Other
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} />

Progress component props

NameTypeDescription
animate
boolean
Whether to animate striped progress bars
color
MantineColor
Progress color from theme
label
string
Text to be placed inside the progress bar
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
sections
ProgressSection[]
Replaces value if present, renders multiple sections instead of single one
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Height of progress bar
striped
boolean
Adds stripes
value
number
Percent of filled bar (0-100)

Progress component Styles API

NameStatic selectorDescription
root.mantine-Progress-rootRoot element
bar.mantine-Progress-barFilled bar
label.mantine-Progress-labelProgress label