Progress Bar
A horizontal bar that visually communicates the completion of a task or process.
Loading preview…
1
'use client';2
3
import { ProgressBar } from 'sdaia-ui';4
5
export default function ProgressBarRealWorld() {Installation
npx sdaia-ui@latest add progressbar
Usage
import { ProgressBar } from "@/components/ui/progress"<ProgressBar progress={50} />Examples
Default
A progress bar without a text label.
Loading preview…
1
'use client';2
3
import { ProgressBar } from 'sdaia-ui';4
5
export default function ProgressBarLabelNone() {Inline
Use `label="Inline"` to show the progress value alongside the fill.
Loading preview…
1
'use client';2
3
import { ProgressBar } from 'sdaia-ui';4
5
export default function ProgressBarInline() {Floating Top
Use `label="Top Floating"` to show a label above the fill indicator.
Loading preview…
1
'use client';2
3
import { ProgressBar } from 'sdaia-ui';4
5
export default function ProgressBarTopFloating() {Floating Bottom
Use `label="Bottom Floating"` to show a label below the fill indicator.
Loading preview…
1
'use client';2
3
import { ProgressBar } from 'sdaia-ui';4
5
export default function ProgressBarBottomFloating() {Bottom Label
Use `label="Bottom"` for a static label below the full track width.
Loading preview…
1
'use client';2
3
import { ProgressBar } from 'sdaia-ui';4
5
export default function ProgressBarBottom() {API Reference
ProgressBarProps
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 |