Rings Progress
A Mantine React component for Apple Watch-style concentric progress rings with glow effects, pulse animations, staggered transitions, countdown mode, per-ring labels, and tooltips.
Full documentation and API reference available at gfazioli.github.io/mantine-rings-progress
Installation
yarn add @gfazioli/mantine-rings-progressOverview
Rings Progress displays multiple concentric progress rings, Apple Watch style:
- Multiple rings — stack as many progress rings as needed
- Glow effects — optional glow around ring segments
- Pulse animations — pulsating ring effects
- Staggered transitions — sequential ring animation on mount
- Countdown mode — animated countdown timer
- Configurable direction — clockwise or counter-clockwise
- Per-ring labels and tooltips — display values inside/outside rings
- Customizable colors — per-ring Mantine theme colors
- Configurable stroke width — thin to thick rings
Last updated on
