i

Progress bar

Showing state and identity · researched

A bar showing how far a task has progressed.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Progress native: no antd 6.6.5
Variants
line, circle, dashboard
Sizes
small, medium
States documented
—
Accessibility guidance
no

Div with role=progressbar, not native progress. The type prop selects line/circle/dashboard; status values success, exception, normal, active.

docs ↗ · code ↗

Carbon

Progress bar contested native: no @carbon/react 1.117.0
Variants
Determinate, Indeterminate
Sizes
small, big
States documented
error
Accessibility guidance
yes

Job is split across components: Progress bar (div role=progressbar, not native progress), Progress indicator (a step tracker) and Loading/Inline loading (spinners), each with its own docs page. Row describes Progress bar; its documented statuses are active, success and error.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/progress-bar/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ProgressBar"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/progress-bar/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ProgressBar"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No progress bar or spinner. Task list (status per task) and the Complete multiple tasks and Step by step navigation patterns show progress through tasks, but not process progress.

Material Web

Progress indicators (<md-circular-progress>, <md-linear-progress>) native: no @material/web 2.5.0
Variants
Circular progress, Linear progress, determinate, indeterminate, four-color
Sizes
—
States documented
—
Accessibility guidance
yes

Rendered from divs and svg, not the native progress element. Accessibility section advises an aria-label on each indicator.

docs ↗ · code ↗

Primer

ProgressBar native: no @primer/react 38.40.1
Variants
—
Sizes
small, default, large
States documented
default
Accessibility guidance
yes

Renders a span with role=progressbar, not the native progress element. Supports multiple segments and animated. Size is the barSize prop. Spinner (sizes small, medium, large) is the indeterminate counterpart and has its own Accessibility page.

docs ↗ · code ↗

Spectrum

Progress bar; Progress circle subset native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default
Accessibility guidance
yes

Two sibling components, each covering part of the concept (docs on both swc and rsp). Sizes from the SWC 2nd-gen bar data file; the circle has s, m, l only and staticColor is an option. Native check: SWC 2nd-gen and 1st-gen bars are divs with role=progressbar, the circle is an svg, and S2 uses React Aria ProgressBar (div), never the progress element. Bar's Accessibility section is the Button keyboard table reused; the circle page has none.

docs ↗ · code ↗

USWDS

Step indicator contested native: no @uswds/uswds 3.14.0
Variants
.usa-step-indicator--no-labels, .usa-step-indicator--counters, .usa-step-indicator--counters-sm, .usa-step-indicator--center
Sizes
—
States documented
default
Accessibility guidance
yes

Shows position in a multi-step process using an ol of segments; there is no progress bar or spinner component.

1 corrected on re-read
  • builds_on_native: "partly" → "no" Twig renders div > ol (li segments, aria-current) plus heading; no progress element

docs ↗ · code ↗

Platform facts

Native elementprogressSpec: progress represents the completion progress of a task, either indeterminate or a fraction of max. Attributes value and max (default 1; min is always 0). MDN: :indeterminate matches when value is absent. Not meter: spec and APG Meter say meter must not indicate progress. APG has no progressbar pattern page; the Meter page points to the progressbar role. MDN progress: implicit ARIA role progressbar, no role permitted; max default 1. The spec distinguishes it from meter ('The meter element should not be used to indicate progress'); the meter element (value, min, max, low, high, optimum; MDN implicit role meter) is the native host of the APG Meter pattern.
Baselinewidely · 2018-10-02
APG patternmeter
ARIA roleprogressbar
Shipped by6 of 7 systems

Anatomy

  1. progress bar — The progress element; APG role progressbar is referenced by the Meter page. Spec: determinate (0 to max) or indeterminate.
  2. label — MDN Accessibility: provide an accessible label (label element, aria-labelledby or aria-label); text between the tags is only a fallback.
  3. value optional — value attribute; absence means indeterminate.

The seven states

default Determinate at a value.
hover n/a — Not interactive.
focus n/a — Not focusable.
active n/a — Not interactive.
disabled n/a — Not defined.
error n/a — Not defined.
loading Mapping inference: 'loading' is taken to be indeterminate. Spec: indeterminate means progress is being made but it is not clear how much more work remains; MDN: :indeterminate matches when value is absent.

Every cell was read twice, the second time from raw sources by a separate pass. 2 of 35 fields changed on the second read — open any “corrected” note to see what it said before.