{"repo":"gfazioli/mantine-rings-progress","free":true,"listed":false,"github":"https://github.com/gfazioli/mantine-rings-progress","clone":"git clone https://github.com/gfazioli/mantine-rings-progress.git","description":"A Mantine 9 concentric ring progress component inspired by Apple Watch activity rings — animated, glowing, accessible, with per-ring customization.","language":"TypeScript","stars":10,"topics":["apple-watch","mantine","mantine-ui","nextjs","reactjs","typescript","activity-rings","animation","extension","glow"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Mantine Rings Progress Component --- ❤️ If this component has been useful to you or your team, please consider becoming a sponsor Overview This component is created on top of the Mantine library. It requires Mantine 9.x and React 19 . Mantine Rings Progress is a Mantine UI extension that renders multiple concentric ring progress indicators — inspired by the Apple Watch activity rings. Each ring is defined by a value and color, and the component wraps native Mantine RingProgress instances with rich customization options. Features - Per-ring customization — Override thickness , roundCaps , and rootColor on individual rings - Per-ring linear gradients — Paint a ring's stroke with a two-stop gradient via gradient: { from, to, deg? } - Per-ring value labels — showValues (or per-ring showValue ) drops a styled pill at the endpoint of each arc, with custom formatValue - Per-ring interactions — onClick and onHover callbacks with geometric hit-testing , so the right ring fires even when their wrappers overlap - Entrance animation — Animate rings from 0 to their target values on mount - Staggered animation — Animate rings one after another with configurable delay - Animated value changes — animateValueChanges interpolates value updates after mount (great for live dashboards) - Glow / neon effect — drop-shadow glow that follows the ring shape, with per-ring intensity and color - Pulse on completion — Subtle pulse animation when a ring reaches 100%, with onRingComplete callback - Start a","default_branch":null,"files":null,"tree":[],"storefront":"/r/gfazioli","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/gfazioli/mantine-rings-progress/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}