# Progress bar (goodtabs UI)

A determinate or indeterminate bar with the real progressbar role.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/progress-bar.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/progress-bar`

## Usage

```tsx
import { ProgressBar } from "@/components/ui/progress-bar"

<ProgressBar label="Uploading" value={64} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Accessible name and visible label. |
| value | `number` |  | Current value. Leave out for indeterminate. |
| max | `number` | `100` | The value that means done. |
| hideLabel | `boolean` | `false` | Keep the label for screen readers only. |

## When to use

- Uploads, builds and imports with a known amount of work
- Work that is running but has no measurable end, using the indeterminate form

## When not to use

- A goal with a count and a footnote: use progress-card
- A reading against a range: use meter, since it is not progress

## Notes for agents

- It is a client component because the indeterminate sweep uses motion
- Omit aria-valuenow when value is undefined; the component does this for you
- The sweep animates transform only and holds a static segment under reduced motion
- Value is clamped to 0 and max; the fill width transition is 200ms

Docs: https://ui.goodtabs.co/components/progress-bar