@gfazioli/mantine-rings-progress
A Mantine component that replicates the progress rings of Apple Watch.
Installation
After installation import package styles at the root of your application:
You can import styles within a layer @layer mantine-rings-progress
by importing @gfazioli/mantine-rings-progress/styles.layer.css
file.
Usage
Mantine RingProgress
We're using a custom version of the
RingProgress
component from themantine
library to render the rings.
The label
prop can be a string or a component. Try to change the label on the above configurator. You may use also an emoji 😊 or a custom component.
Label
The label
prop can be a string or a component.
Tooltips
Despite the RingProgress
component from the mantine
library has a tooltip
prop, we discourage its use. The tooltip will be rendered on the top of the rings and it will be hard to read the label.
Use cases
Countdown
Below, another example of the RingProgress
component from the mantine
library. This time, we're using it to render a countdown.