dotUI

Progress Bar

A progress bar shows the progression of a task.

Overview

Examples

() => clearTimeout(timer)

npm

pnpm

yarn

bun

pnpm dlx 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

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

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

Missing description.

Supports all div attributes.