Progress

v1.0.0·Added in 1.0.0

How far something has come: a bar, a bar in steps or a ring, determinate or indeterminate, with a label, value, tones and thresholds.

It is read, not operated: it never takes focus. Every value change glides on a spring from where the bar was, with no re-render per frame; the first paint already shows the final value. Without a value the bar slides endlessly (the ring spins), and a value arriving later glides on from there. With thresholds a quota bar turns amber, then red, as it fills. Screen readers hear a progressbar named by the label, described by the description, with the value as a percent. Under reduced motion values jump, stripes stop and the indeterminate bar pulses in place. In the playground, press Simulate to run an import from 0 to 100% in uneven steps. The same markup works on a phone; the header wraps under 240px. ProgressRing is the bare ring for other components (a stat card, an avatar, a file row): the same value props, a size that also takes a px number, a thickness, children in the center (the centered text shrinks to fit), classNames ring and content, and its own global defaults under progress-ring. Pass it an aria-label.