# Progress

Shows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/progress
```

## Usage

```tsx
import { Progress } from '@/components/fetaui/progress'

export function Example() {
  return <Progress value={56} label="Upload" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value | number |  |
| max | number | 100 |
| size | sm, md, lg | md |
| state | empty, partial, complete, indeterminate, paused, error | from value |
| label | string | required |
| animated | boolean | true |

## When to use

- When the work has a known end and takes more than a second.
- Indeterminate when it does not.
- Add time left when it is longer than ten seconds.

## When not to use

- For short waits: use Spinner.
- To show a score or a level: it implies a task.

## Accessibility

- The progressbar role with value, min and max, and no value when indeterminate.
- Label it with what is progressing.
- Complete and Error change more than colour in the text you pair them with.

## Motion

- The fill eases to each new value in 300 ms and only moves forward. A restart jumps back.
- Numbers count with it, in mono so the width holds.
- Complete turns success with a small pulse. Error shakes 2 px once.
- The comet sweeps in 1.4 s and pauses offscreen.
- With reduced motion, the fill steps, numbers swap and the comet is a static segment that fades.