Progress

Progress bars use the native <progress> element styled with design system tokens. They indicate completion percentage and support status colour variants.

Basic usage

<progress class="progress-bar" value="60" max="100">60%</progress>

The fallback text (60%) is shown in browsers that do not support <progress>.

Status variants

<progress class="progress-bar progress-bar--success" value="100" max="100">100%</progress>
<progress class="progress-bar progress-bar--warning" value="40" max="100">40%</progress>
<progress class="progress-bar progress-bar--danger" value="10" max="100">10%</progress>

Accessibility

• The native <progress> element is announced by screen readers automatically
• Always include fallback text content inside the element
• If the progress represents a named process, associate it with a label using aria-label or a visible <label>

Usage rules

Do:

• Use status variants to indicate outcome (green for complete, red for critical)
• Include fallback text inside the <progress> element

Don't:

• Don't use progress bars for indeterminate loading — use a spinner or skeleton instead
• Don't animate the value attribute with JS unless the operation is genuinely progressing

CSS reference

This section documents how the component is built. For usage, see the sections above.

Tokens

Selectors