Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · extension · since 2026-09

ProgressBar

Purpose

A progression that can be measured, on the native element: the browser says “barre de progression, 40 %” without an ARIA attribute, and a label names it. Without a value the bar is indeterminate, the honest state for a wait whose length is unknown.

When to use, when not

Use it for a task with a measurable advance: an export, an analysis over pages, criteria decided out of 106. For a wait with no measure inside a zone, BusyRegion; for a button waiting on the server, Button with busy.

Anatomy

  1. The label.
  2. The bar, hollow, filled with the action ink.
  3. The percentage, written.

Props

Props of ProgressBar
NameTypeDefaultWhat it does
idstringThe element's id; the label's `for` is the same value.
labelstringThe visible label: what is progressing, as a noun phrase. Read only by assistive technology on a strip.
value?number | undefinedThe progress, from 0 to `max`. Absent, the bar is indeterminate.
max?number100The value that means done.
showValue?booleantrueWrites the percentage next to the bar. Never on a strip.
strip?booleanfalseA thin line across a shell's edge, the label hidden and the value unwritten: for a progress the screen says in words elsewhere.
class?string''Layout classes only.

States

Measured and running, indeterminate, done, and the strip across a shell’s edge.

done

Light
100 %
Dark
100 %
320 px, light
100 %
320 px, dark
100 %
216 px, light
100 %
Forced colours, captured
ProgressBar, story done, as Chromium renders it with forced colours active

indeterminate

No value: a wait whose length is unknown, said as such.

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
ProgressBar, story indeterminate, as Chromium renders it with forced colours active

measured

The native element with its label; the value is read from the bar, the milestones from the region.

Light
0 %
Dark
0 %
320 px, light
0 %
320 px, dark
0 %
216 px, light
0 %
Forced colours, captured
ProgressBar, story measured, as Chromium renders it with forced colours active

strip

The thin line across the top of the extension’s panel: the label is read, not shown, and the sentence under it says the progress in words.

Light

38 % des critères évalués

Dark

38 % des critères évalués

320 px, light

38 % des critères évalués

320 px, dark

38 % des critères évalués

216 px, light

38 % des critères évalués

Forced colours, captured
ProgressBar, story strip, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: progressbar, named by the label, the value the element’s own.
  • Keyboard, focus: none.
  • Live regions: none here. The bar carries the value continuously; announcing every percent would be chatter. Milestones are the page’s through LiveRegion: started, half, done, and done matters most, since without it the user who does not see the screen waits for a result already there.

Content rules

French. The label is what progresses, as a noun phrase: “Export du rapport”.

Do and don’t

  • Do announce the end through a live region.
  • Do not draw the bar with a div and aria-valuenow; the element exists.
  • Do not hide the percentage unless the label already says it.
  • Do use strip only where the screen says the progress in words next to it, as the panel’s sentence “38 % des critères évalués” does; the strip alone would leave the figure to colour.

Examples

<ProgressBar id="export" label="Export du rapport" value={percent} />
<LiveRegion message={milestone} />

Surfaces

  • Extension: the strip of the audit’s progress over the panel’s header; the page analysis, when the panel is on Svelte.
  • App: the bulk export; not ported yet.

Related

BusyRegion, LiveRegion.

Decisions

  • 2026-09-24: the native element, styled through its pseudo-elements, since a remade bar would need three ARIA attributes for what the browser already says.
  • 2026-09-27: strip draws the same element as the thin line across the extension panel’s top, which was a div with role="progressbar" and three ARIA attributes; the label is hidden rather than dropped, so the bar keeps its name.

Criteria held by construction

  • 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
    The native progress element carries its role and its value; nothing is declared by hand, and an absent value is the indeterminate state.
  • 11.1, Chaque champ de formulaire a-t-il une étiquette ?
    The label's for and the element's id come from one prop, so the bar is named like a field.
  • 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
    The value is written as a number next to the bar; the fill only draws it.

Tokens it reads

  • Colour: --rl-action, --rl-ink, --rl-ink-soft, --rl-line, --rl-sunken
  • Typography: --rl-font-mono, --rl-weight-bold, --rl-text-sm
  • Spacing: --rl-space-1, --rl-space-1-5, --rl-space-3
  • Layout: --rl-border