ProgressRing

A small circular progress ring with content in its center, used as a task badge.

When to use

• Compact status beside a task, step count, or agent run where a full bar would not fit.
• Showing a count (steps done, files left) inside the ring while the arc shows the share complete.
• Not for labelled progress with a percentage: use Progress. Not for allowances broken down by category: use UsageMeter.

Usage

import { ProgressRing } from "@/components/iris/progress-ring/progress-ring";

h(ProgressRing, { progress: 0.6, tone: "accent", size: 32 }, "3");

Props

Prop	Type	Default	Description
progress	number	—	Required. Share complete from 0 to 1 (clamped).
tone	"orange" | "green" | "red" | "accent"	"orange"	Arc colour.
children	ReactNode	—	Centered content, set at 12px semibold tabular numbers. Keep it to one or two characters.
size	number	28	Diameter in px; the stroke stays 2px.

Notes

• Purely visual: it has no progressbar role or label. Put the meaning in nearby text (for example "3 of 5 steps") or wrap it with role="img" and an aria-label.
• The arc eases to new values over 400 ms via a CSS transition.
• Reads --line for the track and --orange, --green, --red, or --accent for the arc.