This component is created on top of the Mantine library. Display progress with animated rings like the Apple Watch activity app.
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';
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>
}
/>
);
}
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 |