RingProgress

Give user feedback for status of the task with circle diagram
Import

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:

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

RingProgress component props

NameTypeDescription
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
thickness
number
Ring thickness

RingProgress component Styles API

NameStatic selectorDescription
root.mantine-RingProgress-rootRoot element
label.mantine-RingProgress-labelLabel element