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
<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:

<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:

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

Customize label

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

40%
<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">
<CheckIcon style={{ height: 22, width: 22 }} />
</ThemeIcon>
</Center>
}
/>
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback