Progress Bars

Progress Bars

Progress bars communicate a measurable amount completed relative to a known total.

Core concept

Explain progress structure, progress-bar width, aria-valuenow/min/max, labels, striped and animated styles, and stacked progress segments.

Using it in a real interface

Build a file upload progress indicator and a multi-step completion bar. Explain when a percentage is meaningful and when an indeterminate spinner is more honest.

Implementation notes

Keep the accessible progress semantics synchronized with the visual width. A bar showing 80% but announcing 40% creates a misleading experience.