Progress Bar

A progress bar shows the progression of a task.

On this page

Props

label

value

isIndeterminate

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

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/progress-bar

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>

primary

success

accent

danger

warning

Loading75%

Feeding…30 of 100 dogs

Sending…¥60

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

The visual track for the progress bar.

Supports all div attributes.

Prop	Type	Default

A progress bar output displays the current value of the progress bar as text.

Supports all span attributes.

Prop	Type	Default

Last updated on 6/16/2026