# Progress

> How far along, as a bar or a ring: the fill eases to each value, the percent rolls, and at 100 it turns green and a check draws itself.

Progress bars usually step from value to value and stop silently at 100%. Here the fill eases to each new value while the percent rolls; without a value a short segment sweeps along; at 100 the fill turns green, a check draws itself and the label morphs to your done text. An error turns the fill red where it stopped.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/progress.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `number-roll`, `text-morph`, `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/progress
- Registry item (source): https://hairlineui.com/r/progress.json

## Usage

```tsx
import { Progress } from "@/components/ui/progress";

<Progress label="Uploading brief.pdf" doneLabel="Uploaded" value={percent} />
<Progress variant="ring" value={72} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | 0–100; omit for unknown. |
| `label / doneLabel` | `string` | – | Above the bar; doneLabel replaces it at 100. |
| `error` | `boolean` | `false` | Red fill. |
| `showValue` | `boolean` | `true` | Show the percent. |
| `variant` | `"bar" \| "ring"` | `"bar"` | Shape. |
| `size` | `number` | `44` | Ring size in px. |

## States

- **advance**: Fill eases 600ms; percent rolls.
- **unknown**: A 30% segment sweeps every 1.3s.
- **done**: Green, check draws (360ms), label morphs.
- **error**: Red fill where it stopped.

## What it handles

The end of a task is the moment people look for; most progress bars just stop. This one says it finished.

- **Eased fill**: transform scaleX over 600ms, never a jump.
- **A finish**: Green fill, drawn check, label morph at 100.
- **Unknown length**: A sweeping segment when there is no value.
- **Bar or ring**: Same props; the ring shows the percent inside.

## Replaces

progress bar, circular progress, upload indicator

## Where it fits

- **File uploads**: "Uploading" → "Uploaded" with a drawn check.
- **Onboarding**: How much of setup is done.
- **Imports and exports**: Rows processed in a long job.
- **Storage and quotas**: A ring showing how full something is.

## Notes

- role="progressbar" with aria-valuenow; aria-busy until done.
- Reduced motion: values change in place; the unknown sweep slows.

License: MIT (https://hairlineui.com/license#components)