dotUI

Progress Bar

A progress bar shows the progression of a task.

() => clearTimeout(timer)

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>

Use the controls below to experiment with different progress bar props and see the live preview and code update.

label

value

isIndeterminate

<ProgressBar value={60}>
  <Label>Loading...</Label>
  <ProgressBarControl />
</ProgressBar>

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

Missing description.

Supports all div attributes.