Progress Bar

A presentational completion indicator (role="progressbar"). value (0–100) drives the fill width; status sets the colour.

Install

Examples

Progress

value is the completion percentage, clamped to 0–100.

Status

status colours the fill — uploading, positive, or negative.

Live upload

Drive value over time, then flip status and label on completion.

Start upload

Guidelines

Usage

file uploads, multi-step progress, and any determinate task. Pass label for an accessible name. For indeterminate waits, use a Spinner.

Do

  • Use a progress bar when you can measure completion (determinate tasks).
  • Update label to reflect the current state (“Uploading” → “Complete”).
  • Use positive / negative to signal the final outcome.

Don’t

  • Don’t use it for unknown-duration waits — use a Spinner.
  • Don’t leave it stuck at a value without resolving to success or failure.
  • Don’t rely on fill colour alone — keep a text label nearby.

Accessibility

Properties

Related