# Progress
A bar that shows how far along a task is, or that it is under way when you can't tell. It is a labeled `progressbar`, so screen readers hear the label and the value.
```tsx
import { Progress } from "@/components/ouro/progress/progress";
```
## Example
```tsx
```
## Use instead when
- Use `Spinner` instead for a short wait with no measurable progress, and `Skeleton` to hold the place of content that is loading.
## Props
Type: `ProgressProps`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | | Layout only: margins, width, grid placement (`mt-4`, `max-w-sm`). Appearance classes warn in development; use `tone`. |
| `format` | `Intl.NumberFormatOptions` | | How the value is written, for `showValue` and screen readers: `{ style: "unit", unit: "megabyte" }`. In the reader's locale once the page has hydrated; en-US in the server's HTML and during hydration, since the server cannot know the reader's. |
| `hideLabel` | `boolean` | | Hides the label visually; screen readers still use it. |
| `id` | `string` | | The progress bar's id, for `aria-describedby` or `aria-controls` elsewhere on the page. |
| `indeterminateText` | `string` | `"Loading"` | What screen readers say for the value while it is `null`, that the work is under way. Translate it with the rest of your interface. |
| `label` (required) | `string` | | What is in progress: "Uploading photos". It names the bar for screen readers. |
| `max` | `number` | `100` | The value at the end of the bar, when the work is done. |
| `min` | `number` | `0` | The value at the start of the bar. |
| `ref` | `Ref` | | Reaches the rendered element. |
| `showValue` | `boolean` | | Shows the value beside the label, as a percentage unless `format` says otherwise. |
| `tone` | `"primary" \| "secondary" \| "destructive" \| "success" \| "warning"` | `"primary"` | Color role from the theme for the filled part, named after its token. `secondary` is the muted foreground. |
| `value` (required) | `number \| null` | | How far along the work is, from `min` to `max`. `null` while you don't know: the bar is indeterminate and slides instead of filling. |
## Don't use
These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.
- `color`: Not a prop. Ouro UI uses `tone`: `