Mantine Rings Progress Component

r.mp4

---

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