Skip to content

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

Free

Quarter Progress for React

A progress bar at 25 percent, early in the task, with about three quarters of the track still empty.

A single bar, filled to 25 percent. Most of the track is still empty, and there is no visible label or percentage.

Use a quarter-full bar for the start of a known task, such as an upload that has just begun. A Spinner fits when you cannot say how much is done. In React, Base UI shows only the value you pass.

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={25}
/>

FAQ

What does the bar show?

value is 25 on the default range of 0 to 100, so the fill covers a quarter of the track. w-full max-w-md sets its width.

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 update the 25?

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

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.

How do I make 25 mean step 1 of 4?

Pass value in the same units as the maximum. Set max on Progress: step 1 of 4 is max 4 and value 1.

How wide is the bar?

w-full max-w-md: as wide as its container, up to 28rem. This demo sets no height. Each theme style sets its own, from h-0.5 to h-3.

API Reference

Progress

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

All 20 progress examples