ProgressCircle

How far along something is, drawn as a ring.

<ProgressCircle value={72}>
  <ProgressCircle.Indicator />
  <ProgressCircle.Value />
</ProgressCircle>

• ProgressCircle — the root. It clamps the value, resolves the recipe and computes the ring's geometry once, then publishes all three.
• ProgressCircle.Indicator — the ring: the track, and the arc of it that is done.
• ProgressCircle.Value — how far along, written in the middle.

Written with no children it is the ring alone, which is the form a row wants.

It is the ProgressBar bent into a circle — the same five variants, the same clamped range, the same formatOptions, the same 240ms — and it is a second component rather than a shape prop on that one because the two share no geometry at all: a bar is a View that grows, and this is an SVG path whose dash offset moves.

There is no isIndeterminate here either. The reason is the bar's, and it is written up there.

The number in the middle

<ProgressCircle value={72}>
  <ProgressCircle.Indicator />
  <ProgressCircle.Value />
</ProgressCircle>

<ProgressCircle value={100} variant="success">
  <ProgressCircle.Indicator />
  <ProgressCircle.Value>✓</ProgressCircle.Value>
</ProgressCircle>

Value is positioned absolutely so it centres on the ring rather than pushing it: the root is a box the size of the circle, and a text node in the flow would make that box taller than the drawing in it.

It formats through the root's formatOptions, on the same rule as the bar's — the fraction for a percentage, the value for anything else. Children replace it outright.

Not at sm. 32 points across, less two strokes, is narrower than "64 %" is wide. That step is the ring on its own.

The motion

The arc sweeps to each new length over 240ms — the bar's number, because two progress indicators on one screen moving at two speeds is a bug nobody files and everybody sees.

It is a dash offset on one path rather than a shape rebuilt per value, which is what keeps one rounded cap at each end while it moves, and it is an animated prop rather than an animated style, because strokeDashoffset is an SVG attribute.

<ProgressCircle.Indicator animation={false} />

The ring starts at twelve o'clock. The turn is on the indicator's wrapper rather than on each path: Circle's own originX / originY / rotation emit an invalid DOM property on web, and one rotation on the box is one thing to read instead of three props on two circles.

Sizes

Bigger than the Spinner's ladder at every step, and that is the difference between the two: a spinner says "wait" and this says how long, which usually means it has a number written in the middle of it.

The stroke is centred on the path, so the ring fits its box: the path's radius is half the diameter less half the stroke.

Variants and colour

The ProgressBar's table, unchanged — one neutral ring, and five arcs on it. color is a raw value (R7) and lands on the arc through the same bgSelected role.

The two colours reach the SVG as strings, not styles: a path is stroked by a prop rather than by a stylesheet. The recipe still owns them, on two slots it never renders — the same thing the Tabs recipe does with its content slot — because that is what makes a raw color reach the arc through resolveTint, which only maps roles a variant declared.

• accessibilityRole="progressbar" on the root, overridable.
• accessibilityValue carries the caller's range and value, not the clamped fraction.
• The ring itself is a drawing; what a screen reader reads is that value.