Determinate Progress Ring
A ring fills from empty to full while the percentage counts up inside it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
import {
animate,
motion,
useMotionValue,
useReducedMotion,
useTransform,
} from "motion/react";About this pattern
For work whose end is genuinely known: uploads, exports, batch imports, multi-step installs. The arc and the number are driven by a single value, so they can never disagree, and the readout uses tabular figures so the digits climb without twitching sideways. The number never scales or bounces — a figure that deforms while it counts stops reading as data and starts reading as decoration. Use a breathing indicator instead whenever the finish line is a guess.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
Determinate rings whose fill maps directly onto a known value.
Related patterns
- File Upload ProgressA file row's bar fills as bytes land while the percentage and the counter roll with it.
- Download Arrow ProgressThe download glyph floods with color from the bottom as the transfer advances.
- Long Task EstimateA bar for work measured in minutes, with the time-remaining wording softening as it runs out.