Progress

Visualize completion for uploads, sync, and multi-step work. Pair a label with a live value when the percentage matters.

Examples

Basic

Uploading

Animated

Syncing

Overview

Progress shows how far a task has gone. Compose label, value, track, and indicator under a root that holds the numeric value. Built on Base UI for accessible progress semantics.

tsx

import {
  Progress,
  ProgressLabel,
  ProgressValue,
  ProgressTrack,
  ProgressIndicator,
} from "@standard-ui/react"

<Progress value={60}>
  <ProgressLabel>Uploading</ProgressLabel>
  <ProgressValue />
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

Usage

Value

Pass a number from 0 to 100 (or your custom max). Update it as work progresses so the indicator width and ProgressValue stay in sync.

tsx

<Progress value={uploadPercent}>
  <ProgressLabel>Uploading</ProgressLabel>
  <ProgressValue />
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

Label and value

Use ProgressLabel for the task name and ProgressValue for the formatted percentage. The root lays them out in a two-column grid above the track.

tsx

<ProgressLabel>Syncing</ProgressLabel>
<ProgressValue />

API

Parts mirror Base UI Progress. The root accepts value and related props.

Part	Role
Progress	Root state and numeric value.
ProgressLabel	Accessible name for the task.
ProgressValue	Formatted current value (e.g. percentage).
ProgressTrack	Background bar that spans the full width.
ProgressIndicator	Filled portion reflecting the current value.

Prop	Type	Default	Description
value	number \| null	—	Current progress value.
max	number	100	Maximum value for a complete bar.

Guidelines

Do

Label the task so users know what is in progress
Update value as work advances — avoid a stuck bar
Prefer determinate progress when you can estimate completion

Don't

Don't use progress for instant actions that finish in under a second
Don't omit a label when multiple progress bars appear together
Don't animate wildly — keep transitions short and ease-out