# Progress

> Linear bar, ring and segmented meter, all spring-driven.

Component · Free · https://lodeui.com/components/progress

## When to use

- Showing how much of a task, quota or upload is done.

## When not to use

- Unknown duration: use a spinner or skeleton.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Meter, Progress, ProgressRing } from "@/components/ui/progress";

export function Quota() {
  return (
    <div className="space-y-3">
      <Progress value={812} max={1000} warnAt={0.8} aria-label="API calls" />
      <ProgressRing value={64} aria-label="Storage">64%</ProgressRing>
      <Meter value={3} segments={5} aria-label="Password strength" />
    </div>
  );
}
```

## API reference

### Progress

A linear bar.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / max | `number` | `— / 100` | Amount done. |
| warnAt | `number` | – | Fraction (0–1) where the bar turns destructive. |

### ProgressRing

A circular indicator with optional center content.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / max | `number` | – | Amount done. |
| size / thickness | `number` | `56 / 5` | Dimensions in px. |

### Meter

Segmented meter for discrete levels like password strength.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | – | Filled segments. |
| segments | `number` | `5` | Total segments. |

## Accessibility

- role="progressbar" or role="meter" with min, max and now.
- Pass aria-label so the measure is named.

## Motion

- Springs to each new value; meter segments fill in sequence.

## Responsive behavior

- Linear bars fill their container; rings are fixed size.

## Performance

- Transform and width animations only.

## Notes for AI

- Use warnAt for quotas so 'near limit' is visible.

## Related

- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.
- [Skeleton](https://lodeui.com/components/skeleton) — Shimmering placeholders for loading content.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.