ProgressBar

How far a task has gone: an upload, a profile being completed, the steps of a form.

import { ProgressBar } from '@zitdevs/ui';

Examples

Profile complete72%

Steps done40%

Budget spent88%

<ProgressBar label="Profile complete" value={72} showValue />
<ProgressBar label="Steps done" value={2} max={5} showValue tone="success" />
<ProgressBar label="Budget spent" value={88} showValue tone="accent" size="lg" />

Indeterminate

Without a value, the bar claims no amount: a segment sweeps the track until the work is done.

Uploading the contract

<ProgressBar label="Uploading the contract" />

In Spanish

locale writes the share as the page’s language does.

Perfil completo72 %

Props

Prop	Type	Default	Notes
label	string	required	The accessible name, and the line above the bar unless hideLabel.
value	number	—	From 0 to max, kept within them. Leave it out for an indeterminate bar.
max	number	100	The value that means done.
showValue	boolean	false	Prints the share done beside the label. Ignored while indeterminate.
hideLabel	boolean	false	Keeps the label off screen; it stays the name.
tone	'primary' | 'accent' | 'success'	'primary'	The fill.
size	'sm' | 'md' | 'lg'	'md'	A track 4, 8 or 12px tall.
locale	string	'en'	BCP 47 tag the share is written in: 72%, or 72 % in Spanish.
ref	Ref<HTMLDivElement>	—	The progress bar.
className	string	—	Placement.
anything else	<div> attributes	—	On the progress bar, such as aria-describedby. Not role or aria-value*.

Exported types: ProgressBarProps, ProgressBarTone, ProgressBarSize.

Accessibility

• A role="progressbar" named by label. With a value it reports aria-valuenow against aria-valuemin and aria-valuemax, and the share as written on screen in aria-valuetext.
• Indeterminate, it has no value attributes, which is how assistive technology knows the amount is unknown.
• The visible label and share repeat the bar’s name and value; a progress bar’s content is presentational, so they are not read twice.
• The fill slides into place on a transform, and the sweep of an indeterminate bar holds still in the middle of the track for a reader who asks for reduced motion.
• A primary or success fill reaches 3:1 against the track. The accent fill reaches about 2.7:1, under the 3:1 a graphic that carries meaning needs: use it with showValue, so the share is also written.

Without JavaScript

Server-rendered markup: the bar is drawn from its value. To move it, render it again with a new value; to announce a finished task, say so in a status message, not through the bar.

Theming

primary, accent and success (the fill), border-subtle (the track), ink (the label) and muted (the share).