Ring Progress

import { RingProgressDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.RingProgress);

Usage

The sections prop accepts an array of objects with the following properties:

• value – number between 0 and 100 representing the percentage of the ring to fill
• color – segment color from theme.colors or any CSS color value
• tooltip (optional) – React node to display when hovering over the section
• Any valid SVG <circle> element props (onClick, onMouseEnter, style, etc.)

Note: Section values should sum to 100% or less for expected behavior. Values exceeding 100% total will cause sections to overlap.

<Demo data={RingProgressDemos.usage} />

Size, thickness & rounded caps

Use the size, thickness & roundCaps props to configure the RingProgress size and thickness values:

<Demo data={RingProgressDemos.configurator} />

Sections tooltips

Add a tooltip property to a section to display a floating Tooltip when the user hovers over it:

<Demo data={RingProgressDemos.tooltip} />

Section gaps

Use the sectionGap prop to add visual separation between sections. The gap is specified in degrees:

<Demo data={RingProgressDemos.sectionGap} />

Start angle

Use the startAngle prop to control where the progress starts. The angle is specified in degrees, where 0 = right, 90 = bottom, 180 = left, and 270 = top (default):

<Demo data={RingProgressDemos.startAngle} />

Background color

Use the rootColor prop to customize the color of the unfilled portion of the ring (the background):

<Demo data={RingProgressDemos.rootColor} />

Section events

Each section can receive any valid SVG <circle> element props, including event handlers like onClick, onMouseEnter, and onMouseLeave:

<Demo data={RingProgressDemos.sectionsProps} />

Customize label

You can add any React node as a label, for example a Text component with custom styling or an ActionIcon:

<Demo data={RingProgressDemos.label} />

Filled segment transition

By default, transitions are disabled. To enable them, set the transitionDuration prop to a number of milliseconds:

<Demo data={RingProgressDemos.transitions} />