RingProgress

Give user feedback for status of the task with circle diagram

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Set sections prop to an array of:

value – number between 0 and 100 – amount of space filled by segment
color – segment color from theme or any other css color value

Application data usage

import { RingProgress, Text } from '@mantine/core';

function Demo() {
  return (
    <RingProgress
      label={
        <Text size="xs" align="center">
          Application data usage
        </Text>
      }
      sections={[
        { value: 40, color: 'cyan' },
        { value: 15, color: 'orange' },
        { value: 15, color: 'grape' },
      ]}
    />
  );
}

Colors

In previous example colors from theme.colors were used, but any other css colors can be used instead:

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

function Demo() {
  return (
    <RingProgress
      sections={[
        { value: 40, color: '#68b5e8' },
        { value: 15, color: '#6888e8' },
        { value: 15, color: '#8468e8' },
      ]}
    />
  );
}

Size, thickness & rounded caps

Use size, thickness & roundCaps props to configure RingProgress, size and thickness values are in px:

Size

Thickness

Round caps

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

function Demo() {
  return (
    <RingProgress
      size={120}
      thickness={12}
      roundCaps
      sections={[
        { value: 40, color: 'cyan' },
        { value: 15, color: 'orange' },
        { value: 15, color: 'grape' },
      ]}
    />
  )
}

Sections tooltips

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

Hover sections to see tooltips

import { RingProgress, Text, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <RingProgress
        size={170}
        thickness={16}
        label={
          <Text size="xs" align="center" px="xs" sx={{ pointerEvents: 'none' }}>
            Hover sections to see tooltips
          </Text>
        }
        sections={[
          { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },
          { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },
          { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },
        ]}
      />
    </Group>
  );
}

Rootcolor

Use rootColor property to change the root color:

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

function Demo() {
  return (
    <RingProgress sections={[{ value: 40, color: 'yellow' }]} rootColor="red" />
  );
}

Sections props

You can add any additional props to sections:

Hovered section: none

import { useState } from 'react';
import { RingProgress, Text } from '@mantine/core';

function Demo() {
  const [hovered, setHovered] = useState(-1);
  const reset = () => setHovered(-1);
  return (
    <>
      <RingProgress
        onMouseLeave={() => setHovered(-1)}
        size={140}
        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>
    </>
  );
}

Customize label

You can add any React node as label, e.g. Text component with some additional styles or ThemeIcon:

40%

import { ThemeIcon, RingProgress, Text, Center } from '@mantine/core';
import { IconCheck } from '@tabler/icons';

function Demo() {
  return (
    <>
      <RingProgress
        sections={[{ value: 40, color: 'blue' }]}
        label={
          <Text color="blue" weight={700} align="center" size="xl">
            40%
          </Text>
        }
      />

      <RingProgress
        sections={[{ value: 100, color: 'teal' }]}
        label={
          <Center>
            <ThemeIcon color="teal" variant="light" radius="xl" size="xl">
              <IconCheck size={22} />
            </ThemeIcon>
          </Center>
        }
      />
    </>
  );
}

Go back

Progress – @mantine/core

Up next

Skeleton – @mantine/core

RingProgress component props

Name	Type	Description
label	ReactNode	Label displayed in the center of the ring
rootColor	MantineColor	Color of the root section, key of theme.colors or CSS color value
roundCaps	boolean	Sets whether the edges of the progress circle are rounded
sections^*	RingProgressSection[]	Ring sections
size	number	Width and height of the progress ring in px
thickness	number	Ring thickness

RingProgress component Styles API

Name	Static selector	Description
root	.mantine-RingProgress-root	Root element
label	.mantine-RingProgress-label	Label element

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