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

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

Size

Thickness

Round caps

<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>
  }
/>

Go back

Progress – @mantine/core

Up next

Skeleton – @mantine/core

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter