A horizontal bar that visually communicates the completion of a task or process.
Loading demo: progressbar-real-world
npx sdaia-ui@latest add progressbar
import { ProgressBar } from "@/components/ui/progress"<ProgressBar progress={50} />A progress bar without a text label.
Loading demo: progressbar-label-none
Use `label="Inline"` to show the progress value alongside the fill.
Loading demo: progressbar-inline
Use `label="Top Floating"` to show a label above the fill indicator.
Loading demo: progressbar-top-floating
Use `label="Bottom Floating"` to show a label below the fill indicator.
Loading demo: progressbar-bottom-floating
Use `label="Bottom"` for a static label below the full track width.
Loading demo: progressbar-bottom
Props for the ProgressBar component.
Prop | Type | Default | Required |
|---|---|---|---|
progress | number | 0 | optional |
label | 'none' | 'inline' | 'bottom' | 'top-floating' | 'bottom-floating' | 'none' | optional |
leadingIcon | boolean | false | optional |
trailingIcon | boolean | false | optional |
valueMin | boolean | false | optional |
valueMax | boolean | false | optional |
direction | 'ltr' | 'rtl' | 'ltr' | optional |
animateOnView | boolean | false | optional |