Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty Progress for React

An empty progress track at 0 percent, before the upload starts, with nothing filled in and no visible label.

An empty track. The bar is at 0 percent, so nothing is filled in, and there is no visible label beside it.

Use an empty bar before the work starts, so the track is there when the first update arrives. A Skeleton fits when you are waiting on content, not on a known task. In React, Base UI does not move the bar on its own.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Progress anatomy: root, label, value, track, indicator

Usage

<Progress
  aria-label="Upload progress"
  className="w-full max-w-md"
  value={0}
/>

FAQ

What does the bar show?

value is 0, so the track is empty. The track is still drawn, so the bar keeps its place in the layout.

Is 0 the same as an indeterminate bar?

No. 0 is a measured amount: the work hasn't started yet. Pass null as value when you can't measure the work; the bar then reports an indeterminate state. For a wait with nothing to measure, a Spinner is usually clearer.

What is the accessible name?

aria-label on Progress, Upload progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.

How do I start filling it?

Change value as the work advances. This demo passes a fixed 0.

Which colors does it use?

The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.

What if my maximum isn't 100?

Pass value in the same units as the maximum. Set max on Progress: 5 steps of 5 is max 5 and value 5.

API Reference

Progress

Sets aria-label="Upload progress" and value={0}. The rest is on the Progress page.

All 20 progress examples