Statuses

Progress Bar

A sleek and responsive bar that visually tracks task completion, loading states, or step-based processes in real time.

ProgressBar
NoteProgress Circle

Basic

Progress bars show how much an operation is done, either exactly or roughly, over time.

Loading...

Installation

npx shadcn@latest add @intentui/progress-bar

Manual installation

npm i 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...
Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
Note
Progress Circle