# Progress

> How far along something is: a bar, a bar in steps, or a ring. A real progressbar, with its value in words for screen readers. It fills once it is on screen: the bar as a trail of light with a glowing head, the steps one after another, the ring with a soft glow, and the xl ring holds the value in its center. With reduced motion it is simply full. The fill slides on transform. It is the brand color by default; a status is something you state with tone, such as over budget, since a low value is not an error on its own. Indeterminate, it runs the skeleton's band, and stands still as a faint fill without motion.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/progress

## Install

```bash
npx @entrepta/cli@latest add progress
```

Files: `primitives/progress.tsx`, `lib/motion.ts`.
npm packages: `class-variance-authority`, `motion`.
Comes with: `motion-lib`.

## Usage

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

<Progress label="groceries" value={spent} max={budget} showValue />
<Progress label="months saved" value={9} max={12} segments={12} showValue />
<Progress variant="ring" size="xl" aria-label="emergency fund" value={62} showValue />
<Progress aria-label="syncing" indeterminate />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value, max` | `number` | 0, 100 | Clamped into range |
| `variant` | `"bar" \| "ring"` | "bar" | A bar or a ring |
| `segments` | `number` | - | Split the bar into steps |
| `label` | `ReactNode` | - | Shown above, and the bar's name |
| `showValue` | `boolean \| ReactNode` | false | The value beside the label |
| `valueText` | `string` | "75%" or "9 of 12" | What screen readers hear |
| `indeterminate` | `boolean` | false | No known end |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | "md" | 4 to 12px bar; 16, 24, 40 or 72px ring, the value centered in xl |
| `tone` | `"brand" \| "success" \| "warning" \| "error"` | "brand" | A status you state, never set by the value |