Progress Bar

<ProgressBar>
  <Label>Loading...</Label>
  <ProgressBarControl />
</ProgressBar>

Installation

npx shadcn@latest add @dotui/progress-bar

Usage

Use progress bars to show the progression of a system operation or task.

import { ProgressBar, ProgressBarControl } from '@/components/ui/progress-bar'

<ProgressBar value={60}>
  <ProgressBarControl />
</ProgressBar>

Anatomy

ProgressBar wraps ProgressBarControl (the track) and an optional ProgressBarOutput that renders the value as text.

import {
  ProgressBar,
  ProgressBarControl,
  ProgressBarOutput,
} from '@/components/ui/progress-bar'
;<ProgressBar>
  <ProgressBarOutput />
  <ProgressBarControl />
</ProgressBar>

Value

value is measured against minValue and maxValue, which default to 0 and 100. When progress can't be measured, set isIndeterminate.

<ProgressBar minValue={50} maxValue={150} value={100}>
  <ProgressBarControl />
</ProgressBar>

Value formatting

Pass formatOptions (an Intl.NumberFormat config) to format the value ProgressBarOutput renders, or replace the text entirely with valueLabel.

<ProgressBar formatOptions={{ style: 'currency', currency: 'JPY' }} value={60}>
  <ProgressBarOutput />
  <ProgressBarControl />
</ProgressBar>

Examples

API Reference

ProgressBar

ProgressBarControl

ProgressBarOutput