Mantine Rings Progress Component

---

Overview

This component is created on top of the Mantine library. Display progress with animated rings like the Apple Watch activity app. You can find more components on the Mantine Extensions Hub library.

Installation

npm install @gfazioli/mantine-rings-progress

or

yarn add @gfazioli/mantine-rings-progress

After installation import package styles at the root of your application:

import '@gfazioli/mantine-rings-progress/styles.css';

Usage

import { RingsProgress } from '@gfazioli/mantine-rings-progress';

function Demo() {
  const rings = [
    { value: 20, color: 'green' },
    { value: 80, color: 'blue' },
  ];

  return (
    <RingsProgress
      size={140}
      rings={rings}
      label={
        <ActionIcon color="yellow" variant="filled" radius="xl" size="xl">
          <IconCheck style={{ width: rem(22), height: rem(22) }} />
        </ActionIcon>
      }
    />
  );
}

Props

Name	Type	Description
animate	boolean	Animate
animationDuration	number	Animation duration in ms
animationSteps	number	Animation steps
animationTimingFunction	linear | ease | ease-in | ease-out | ease-in-out | ease-in-cubic | ease-out-cubic | ease-in-out-cubic	Animation timing function
gap	number	Gap between rings
label	React.ReactNode	Label displayed in the center of the ring
rings *	RingProgressSection[]	List of the rings
rootColor	MantineColor	Color of the root section, key of theme.colors or CSS color value
rootColorAlpha	number	Root color alpha
roundCaps	boolean	Sets whether the edges of the progress circle are rounded
size	number	Width and height of the progress ring
thickness	number	Ring thickness