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 are in px:

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>
);
}

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%
Download more icon variants from https://tabler-icons.io/i/check
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>
}
/>
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

RingProgress component props

NameTypeDescription
label
ReactNode
Label displayed in the center of the ring
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

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