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
npx shadcn@latest add @intentui/progress-barManual installation
npm i tailwind-mergeAnatomy
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...