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

Size

Value

Striped

Animate

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:

Your password

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

Name	Type	Description
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

Name	Static selector	Description
root	.mantine-Progress-root	Root element
bar	.mantine-Progress-bar	Filled bar
label	.mantine-Progress-label	Progress label

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter