labsUI

Progress

Accent bar that springs to each new value, with an optional label and percentage. Leave out value for an indeterminate sweep (static under reduced motion).

npx @kznlabs/labsui add progress
Uploading clip.mp40%
Processing
import { Progress } from "@/components/ui/progress";export function UploadProgress({ percent }: { percent?: number }) {  // Pass no value while the size is unknown: the bar sweeps instead.  return <Progress label="Uploading clip.mp4" value={percent} showValue />;}

<Progress>

Accent-colored bar that springs to each new value (scaleX, so no layout work per frame). Indeterminate: a segment sweeps across, the one allowed infinite tween; static under reduced motion.

  • aria-label
    string

    Accessible name when there is no visible label.

  • label
    string

    Visible label above the bar; also its accessible name.

  • maxdefault 100
    number

    Value at 100%.

  • showValuedefault false
    boolean

    Show the percentage next to the label.

  • sizedefault "default"
    "sm" | "default"

    Bar thickness.

  • value
    number

    Omit for an indeterminate bar (unknown duration).

PropTypeDefault
aria-label

Accessible name when there is no visible label.

string—
label

Visible label above the bar; also its accessible name.

string—
max

Value at 100%.

number100
showValue

Show the percentage next to the label.

booleanfalse
size

Bar thickness.

"sm" | "default""default"
value

Omit for an indeterminate bar (unknown duration).

number—

* required. Every component also takes className.