Spark UI
Back to UI Kit

Pulse Rings

Concentric progress rings that spring to their goals, overlap past 100%, and sync with a legend of live counters.

Interactive Stage Preview

Customize

8 options
Ring 1
Ring 2
Ring 3
Rings
3
Thickness
14
Ring Gap
5
Legend
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add pulse-rings

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'First ring color.
secondColorstring (hex)'#7dd3fc'Second ring color.
thirdColorstring (hex)'#c4f36b'Third ring color.
ringsnumber3Number of concentric rings.
thicknessnumber14Stroke width of each ring.
ringGapnumber5Space between rings.
showLegendbooleantrueShow the legend with counters.
speednumber100Playback speed of entry and transition animations, as a percentage.