40Progress bar

Native — the value reaches assistive tech with zero ARIA. The percentage prints as mono text beside it: a bar alone encodes the value only as length, unreadable at 6px tall.

Use it for

Course completion, uploads — "how far along"

Not for

A score against a threshold — Meter ("how good" is a different question)

Indeterminate

A different claim from a determinate bar: “something is happening, duration unknown”. The only looping animation here — a determinate bar animates because the number changed, which is feedback.

markup

<progress class="ns-progress ns-progress--indeterminate" aria-label="Loading"></progress>

In progress / complete

Complete runs green: "done" is a status, not the interactive signal.

35%

100%

markup

<div class="ns-progress-row" style="max-inline-size:20rem">
  <progress class="ns-progress" value="35" max="100" aria-label="35% complete"></progress>
  <span class="ns-progress-row__value">35%</span>
</div>
<div class="ns-progress-row" style="max-inline-size:20rem">
  <progress class="ns-progress ns-progress--complete" value="100" max="100" aria-label="Complete"></progress>
  <span class="ns-progress-row__value">100%</span>
</div>

Accessibility contract

aria-label names what the bar measures — a bare percentage means nothing announced alone