Progress bar

A progress bar is a wait made legible. The fill answers the only question a person has while a task runs, which is how much longer, and it earns its place when that answer is real: an upload knows its byte count, an import knows its row count, a multi-file job knows how many files are left. Reach for one when the wait is long enough to be felt (roughly ten seconds and up) and short enough that watching it is reasonable. Below about a second, show nothing at all.

The determinate bar is the one worth building. An indeterminate bar, the striped or sliding variant that loops without advancing, says only that something is still happening, which is what a spinner says in less space. Keep indeterminate for the opening moments of a load, before there is enough information to compute a percentage, and switch to determinate as soon as there is. A bar that stalls at 99% does more damage than no bar at all, so let the number be honest rather than flattering.

Two neighbours get confused with it. A meter reports a measurement that happens to sit between a floor and a ceiling (disk used, password strength, budget spent); it is not going anywhere and it has no completion. A progress bar is about a task with an end. In markup that distinction is a role: progressbar with aria-valuenow, dropping aria-valuenow entirely while the value is unknown, versus meter. The other neighbour is the numbered step tracker at the top of a checkout, which is navigation through a flow the person controls, not a report on work the system is doing.

The misnomers are mostly borrowed breadth. “Progress indicator” is the family name (NN/g and both Material and Apple use it that way) and covers spinners and activity rings as well as bars, so it is imprecise when you specifically mean the bar. “Loading bar” is common vernacular and fine in conversation, though it quietly assumes the task is a load; bars also count deletions, exports, and conversions. Say “determinate progress bar” when the distinction matters, because that is the phrase every design system will recognise.