Progress Bar

PreviousNext

Progress bars show either determinate or indeterminate progress of an operation over time.

Docs API Reference
Loading…60%
import { ProgressBar } from "@/components/ui/progress-bar"

export function ProgressBarDemo() {
  return <ProgressBar label="Loading…" value={60} />
}

Installation

pnpm dlx shadcn@latest add progress-bar

Usage

import { ProgressBar } from "@/components/ui/progress-bar"
<ProgressBar label="Loading…" value={60} />

Examples

Default

Loading…60%
import { ProgressBar } from "@/components/ui/progress-bar"

export function ProgressBarDemo() {
  return <ProgressBar label="Loading…" value={60} />
}

<ProgressBar label="Loading…" value={60} />

Indeterminate

Loading…
import { ProgressBar } from "@/components/ui/progress-bar"

export function ProgressBarIndeterminate() {
  return <ProgressBar label="Loading…" isIndeterminate />
}

Use the isIndeterminate prop when the exact progress is unknown.

<ProgressBar label="Loading…" isIndeterminate />

Custom Value Label

Processing files15 of 60 files
import { ProgressBar } from "@/components/ui/progress-bar"

export function ProgressBarLabel() {
  return (
    <ProgressBar
      label="Processing files"
      value={45}
      formatOptions={{ style: "decimal" }}
      valueLabel="15 of 60 files"
    />
  )
}

You can provide a custom value label using the valueLabel prop to show custom progress text.

<ProgressBar
  label="Processing files"
  value={45}
  formatOptions={{ style: "decimal" }}
  valueLabel="15 of 60 files"
/>

Custom Value Scale

Storage space450 GB
Download progress275 MB
import { ProgressBar } from "@/components/ui/progress-bar"

export function ProgressBarValueScale() {
  return (
    <div className="flex flex-col gap-4">
      <ProgressBar
        label="Storage space"
        formatOptions={{ style: "unit", unit: "gigabyte" }}
        value={450}
        maxValue={1000}
      />
      <ProgressBar
        label="Download progress"
        formatOptions={{ style: "unit", unit: "megabyte" }}
        value={275}
        maxValue={500}
      />
    </div>
  )
}

By default, the minValue is 0 and maxValue is 100. You can customize these to use different scales.

<ProgressBar
  label="Storage space"
  formatOptions={{ style: "unit", unit: "gigabyte" }}
  value={450}
  maxValue={1000}
/>

Accessibility

The progress bar follows the ARIA progressbar pattern, supporting both determinate and indeterminate progress states. The label is automatically associated with the progress bar semantically.

If there is no visible label, you must provide an aria-label or aria-labelledby prop to identify the element to screen readers.

<ProgressBar aria-label="Loading" value={60} />

Value Formatting

Values are formatted as a percentage by default, but you can customize this using the formatOptions prop. This prop is compatible with the option parameter of Intl.NumberFormat.

<ProgressBar
  label="Currency"
  formatOptions={{ style: "currency", currency: "USD" }}
  value={25}
/>

API Reference

ProgressBar

PropTypeDefaultDescription
labelstring-Label text for the progress bar
valuenumber0The current value (controlled)
minValuenumber0The smallest value allowed
maxValuenumber100The largest value allowed
isIndeterminatebooleanfalseWhether the progress is indeterminate
valueLabelReactNode-Custom content to display as the value label
formatOptionsIntl.NumberFormatOptions{style: 'percent'}The display format of the value
aria-labelstring-Defines a label for screen readers when no visible label is present

The ProgressBar component also supports all props from the react-aria-components ProgressBar component.

Related

  • Progress - Radix UI-based progress component
  • Meter - For showing a measurement within a known range