Skip to content
Try free

Progress

How far a task has got (ProgressBar, ProgressCircle) or how full something is (Meter).

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Progressbar and meter

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Uploading report.pdf40%
Show the code

Default, code

<ProgressBar label="Uploading report.pdf" value={40} />

Indeterminate

Preparing export
Show the code

Indeterminate, code

<ProgressBar value={40} label="Preparing export" isIndeterminate />

Segments

Account setupStep 2 of 5
Onboarding progressStep 1 of 4
Show the code

Segments, code

<div className="flex max-w-md flex-col gap-stack-md">
  <ProgressBar label="Account setup" variant="segments" value={2} maxValue={5} valueLabel="Step 2 of 5" />
  <ProgressBar label="Onboarding progress" variant="segments" value={1} maxValue={4} valueLabel="Step 1 of 4" hideLabel />
</div>

Circle

Show the code

Circle, code

<div className="flex items-center gap-gap-lg">
  <ProgressCircle aria-label="Upload" value={25} size="sm" />
  <ProgressCircle aria-label="Upload" value={60} />
  <ProgressCircle aria-label="Upload" value={80} size="lg" showValue />
  <ProgressCircle aria-label="Syncing" isIndeterminate />
</div>

Meter

Storage used7.2 GB of 10 GB
Show the code

Meter, code

<div className="max-w-md"><Meter label="Storage used" value={72} valueLabel="7.2 GB of 10 GB" tone="warning" /></div>

Tokens

The 12 design tokens Progress reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 12 tokens
Tokens Progress reads
TokenValue nowCSS variable
color.action.danger…--sd-color-action-danger
color.action.primary…--sd-color-action-primary
color.bg.canvas…--sd-color-bg-canvas
color.bg.muted…--sd-color-bg-muted
color.border.control…--sd-color-border-control
color.icon.warning…--sd-color-icon-warning
color.text.default…--sd-color-text-default
color.text.secondary…--sd-color-text-secondary
radius.full…--sd-radius-full
spacing.gap.md…--sd-spacing-gap-md
spacing.gap.xs…--sd-spacing-gap-xs
spacing.stack.xs…--sd-spacing-stack-xs

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { ProgressBar, ProgressCircle, Meter } from "@superduperui/react"

Props

Progress also takes the props of the React Aria component it’s built on.

Progress props
PropTypeWhat it does
labelrequiredstringVisible label (required): what is progressing.
showValuebooleanShow the value text ("40%" or your valueLabel) at the end of the label row. Default true when determinate.
hideLabelbooleanKeep the label for assistive technology but hide it visually.
variant'bar' | 'segments'Default 'bar'bar (default) is one continuous track; segments draws one segment per step with the steps done (and the current one) filled, for onboarding headers. Indeterminate bars always sweep as a bar.
segmentCountnumberHow many segments the segments variant draws. Default: the number of steps in the range (maxValue - minValue), so value 2 with maxValue 5 fills two of five.

When to use it

Use it for

  • Uploads, exports, multi-step jobs
  • Onboarding progress headers: variant segments, one segment per step, with valueLabel naming the step ("Step 2 of 5")
  • Storage or seats used (Meter)

Use something else for

  • Unknown short waits: use Spinner

Accessibility

Screen readers announce "Uploading report.pdf, 40%, progress bar".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2, 2.3.3.

Not interactive: density changes spacing only.

What your product still has to do

  • Label every bar with what is progressing

This release’s test results

Test results for Progress in this release
axe-core (WCAG A, AA, AAA and best practice)120 runs across every story, theme, density and width: 0 violations
Rendered text contrast225 text runs: 0 below 7:1, lowest 11.42:1
Target size0 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)0 focus stops in 0 browser engines: all pass

Manual passes with VoiceOver and NVDA haven’t been done yet.

In Figma

The Figma component is ProgressBar, with Type (Determinate, Indeterminate); Variant (Bar, Segments); Fill (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100). The Figma library isn’t published yet.

Figma to code: Type (Determinate = value, Indeterminate = isIndeterminate); Label → label; Value → value (percentage text is generated); Show value → showValue; Variant → variant (Bar = "bar", Segments = "segments"); Fill → value (0 = 0, 10 = 10, 20 = 20, 30 = 30, 40 = 40, 50 = 50, 60 = 60, 70 = 70, 80 = 80, 90 = 90, 100 = 100).