@gfazioli/mantine-rings-progress
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

Mantine Rings Progress Component


NPM version NPM Downloads NPM License

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

Package Sidebar

Install

npm i @gfazioli/mantine-rings-progress

Weekly Downloads

15

Version

0.1.6

License

MIT

Unpacked Size

142 kB

Total Files

48

Last publish

Collaborators

  • gfazioli