Progress Bar

A horizontal bar indicating the completion of a task. Supports determinate (with percentage) and indeterminate (animated) modes.

Preview

Uploading files72%

Storage used45%

Variants

Brand — 60%

Success — 80%

Warning — 50%

Error — 90%

Sizes

Thin (4 px)

Default (8 px)

Thick (12 px)

Indeterminate

Props

Prop	Type	Default	Description
value	number	--	Progress percentage (0–100)
variant	'brand' | 'success' | 'warning' | 'error'	'brand'	Fill colour
size	'thin' | 'default' | 'thick'	'default'	Track height
indeterminate	boolean	false	Animated indeterminate mode
label	string	--	Visible label text
showValue	boolean	false	Shows percentage text

Code example

React

import { ProgressBar } from '@thepace/lexicon/components';

<ProgressBar value={72} label="Uploading files" showValue />
<ProgressBar variant="success" value={100} />
<ProgressBar indeterminate />

Vanilla HTML

<div class="lex-progress">
  <div class="lex-progress__row">
    <span class="lex-progress__title">Uploading</span>
    <span class="lex-progress__value">72%</span>
  </div>
  <div class="lex-progress__track lex-progress__track--default"
       role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
    <div class="lex-progress__fill lex-progress__fill--brand" style="width: 72%;"></div>
  </div>
</div>

CSS class reference

Class	Purpose
.lex-progress	Container
.lex-progress__track	Background track
.lex-progress__track--thin	4 px height
.lex-progress__track--default	8 px height
.lex-progress__track--thick	12 px height
.lex-progress__fill	Filled portion
.lex-progress__fill--brand	Brand colour fill
.lex-progress__fill--success	Green fill
.lex-progress__fill--warning	Amber fill
.lex-progress__fill--error	Red fill
.lex-progress__fill--indeterminate	Animated fill

Accessibility

• Use role="progressbar" on the track element.
• Set aria-valuenow, aria-valuemin="0", aria-valuemax="100".
• For indeterminate mode, omit aria-valuenow.
• Provide an aria-label describing the operation.

Guidelines

Do

• Show the percentage value for determinate progress.
• Use the appropriate colour variant (error when storage is critical, etc.).

Don't

• Don't use a progress bar for instantaneous operations.
• Don't show a progress bar stuck at 0% or 99% for extended periods.