Progress Ring

A circular progress indicator with an optional percentage label in the centre. Use for compact progress displays.

Preview

70%

25%

100%

Indeterminate

Props

Prop	Type	Default	Description
value	number	--	Progress percentage (0–100)
size	number	64	Diameter in pixels
strokeWidth	number	6	Ring thickness
indeterminate	boolean	false	Spinning mode
showValue	boolean	true	Shows percentage label

Code example

React

import { ProgressRing } from '@thepace/lexicon/components';

<ProgressRing value={70} />
<ProgressRing value={100} size={48} />
<ProgressRing indeterminate size={48} />

CSS class reference

Class	Purpose
.lex-progress-ring	Container
.lex-progress-ring__svg	SVG element (rotated -90deg)
.lex-progress-ring__track	Background circle
.lex-progress-ring__fill	Progress arc
.lex-progress-ring__label	Centre percentage text
.lex-progress-ring--indeterminate	Spinning animation

Accessibility

• Use role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax on the SVG.
• For indeterminate mode, omit aria-valuenow and set aria-label="Loading".

Guidelines

Do

• Use for compact spaces like cards, list items, or dashboards.
• Show the percentage label for clarity.

Don't

• Don't use at sizes smaller than 32 px — the label becomes unreadable.
• Don't use for long-running operations — a progress bar with text is more informative.