https://github.com/gfazioli/mantine-rings-progress

Rings Progress component for Mantine
https://github.com/gfazioli/mantine-rings-progress

Last synced: 1 day ago
JSON representation

Rings Progress component for Mantine

• Host: GitHub
• URL: https://github.com/gfazioli/mantine-rings-progress
• Owner: gfazioli
• License: mit
• Created: 2024-02-09T12:35:04.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-08-02T08:15:24.000Z (2 months ago)
• Last Synced: 2024-09-02T09:41:48.568Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-rings-progress/
• Size: 4.74 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Mantine Rings Progress Component



  



---



  

    

  

  

  

    

  

  









## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.

Display progress with animated rings like the Apple Watch activity app.

You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.

## Installation

```sh

npm install @gfazioli/mantine-rings-progress

```

or 

```sh

yarn add @gfazioli/mantine-rings-progress

```

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

```tsx

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

```

## Usage

```tsx

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

function Demo() {

  const rings = [

    { value: 20, color: 'green' },

    { value: 80, color: 'blue' },

  ];

  return (

    

          

        

      }

    />

  );

}

```

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