Progress

Give user feedback for status of the task
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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} />
Go back
Notification – @mantine/core
Up next
RingProgress – @mantine/core

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"
Predefined progress radius from theme.radius or number for height in px
sections
ProgressSection[]
Replaces value if present, renders multiple sections instead of single one
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined progress height or number for height in px
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
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter