v4.2.12

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:

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' },
      ]}
    />
  )
}

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 { Check } 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">
              <Check size={22} />
            </ThemeIcon>
          </Center>
        }
      />
    </>
  );
}
Go back
Progress – @mantine/core
Up next
Skeleton – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter