# Progress

- Page: <https://kznlabs.github.io/labsUI/components/progress>

## Progress (`progress`, component)

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).

- Install: `npx @kznlabs/labsui add progress`
- Docs: <https://kznlabs.github.io/labsUI/components/progress>
- Brings: utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<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.
  - `max?: number` = `100`: Value at 100%.
  - `showValue?: boolean` = `false`: Show the percentage next to the label.
  - `size?: "sm" | "default"` = `"default"`: Bar thickness.
  - `value?: number`: Omit for an indeterminate bar (unknown duration).

### Usage

```tsx
<Progress label="Uploading clip.mp4" value={progress} showValue />
```

### Example: upload-progress.tsx

```tsx
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 />;
}
```