Progress ring

A progress ring says exactly what a progress bar says, in a shape that fits somewhere a bar does not. The reasons to reach for the circle are layout reasons, not information reasons: a square tile in a dashboard, a thumbnail-sized slot beside a file, the middle of a button that has just been pressed, an upload chip in a corner. It also leaves a hole, and the hole is useful, because the percentage, the remaining time, or a cancel control can sit inside the track instead of beside it.

Determinate is the word that matters. A ring that fills to a known fraction is progress, and it needs a real denominator: bytes of a known total, steps of a known count, seconds of a known duration. A ring that spins forever is a spinner, and the two look close enough that people ship the second while believing they shipped the first. If the code cannot answer “out of how much”, the honest control is the indeterminate one, and the honest fix is usually to find a denominator rather than to fake one by animating to ninety percent and waiting.

The drawing is one trick, worth knowing because it explains every quirk of the component. A circle is stroked, stroke-dasharray is set to its own circumference so the dash is exactly one lap, and stroke-dashoffset is animated from that circumference down to zero, which walks the visible arc around the ring. The stroke starts at three o’clock, so the element is rotated by a quarter turn to begin at the top, and the stroke straddles the path, so the radius has to be inset by half the stroke width or the ring is clipped by its own box. Reading the value out loud is not part of the drawing: the ring needs role="progressbar" with aria-valuenow, since what a screen reader announces is the role and the number, never the shape.

Two cautions from practice. The arc is a poor instrument at small sizes and at extremes, because a few degrees of a small circle is a couple of pixels, which is why the number in the middle is doing more work than most designers assume, and why very short tasks are better served by a control that does not invite the reader to measure an angle. And the circle should not be spent on decoration: an activity ring that encodes a daily goal is legitimate progress, while a ring drawn around an avatar because it looks tidy teaches readers to ignore the one shape you will need later.