Statuses
Progress Bar
A sleek and responsive bar that visually tracks task completion, loading states, or step-based processes in real time. It provides clear progress indication.
Basic
Progress bars show how much an operation is done, either exactly or roughly, over time.
Loading...
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/progress-bar
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install tailwind-merge
Anatomy
import { Description, Label } from "@/components/ui/field"
import {
ProgressBar,
ProgressBarHeader,
ProgressBarTrack,
ProgressBarValue,
} from "@/components/ui/progress-bar"<ProgressBar value={value}>
<ProgressBarHeader>
<Label>Loading…</Label>
<ProgressBarValue />
</ProgressBarHeader>
<ProgressBarTrack />
<Description>This is an example of a progress bar indicating 50% completion.</Description>
</ProgressBar>Indeterminate
An indeterminate progress bar is a type of progress indicator that does not show a specific amount of progress or percentage complete.
Loading...
Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.