---
title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
icon: trending-up
author:
name: imskyleen
url: https://github.com/imskyleen
search:
keywords: [progress bar, loading bar]
related:
- /spinner
- /skeleton
mode: wide
---
### Installation
```package-install
npx shadcn@latest add @redpanda/progress
```
## When to use
The Progress component displays completion progress of a task with a visual progress bar. Use this decision tree to determine when it's appropriate:
```mermaid
graph TD;
A[❓ Need to show progress?] --> B{Progress value known?};
A --> C[ℹ️ Use other feedback methods];
B --> D{Determinate progress?};
B --> E{Indeterminate progress?};
D --> F[✅ Use Progress with value];
E --> G[✅ Use LoadingAnimation];
E --> H{Loading state needed?};
H --> I[✅ Use Progress without value];
H --> J[✅ Use Spinner];
classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;
class F,G,I,J recommended;
class A,B,D,E,H decision;
class C neutral;
```
## Usage
```tsx
```
Pass `value={null}` (or omit `value`) for an indeterminate loading state.
Compose a label and formatted value with the optional sub-components — the track and indicator are rendered automatically:
```tsx
```
### Value range
`min` and `max` define the range and default to `0` and `100`. Base UI clamps `value` into that range and derives a
single percentage from it, so the bar and `ProgressValue` always agree — `value={150}` across `100`–`200` renders the
bar half full and reads `50%`:
```tsx
```
### Styling the indicator
Use `variant="success"` or `variant="warning"` for an explicit status tone. The default remains the primary fill.
The component does not infer a status from its percentage. Keep a visible label or status icon alongside the color.
```tsx
```
Base UI sizes `ProgressIndicator` by setting its `width` to that percentage, which is why the fill animates with
`transition-[width]`. Keep that sizing behavior and use the component's tone variant instead of restyling descendants. Do not add a
`translateX` offset (shadcn/ui does that because Radix keeps its indicator full-width), or the percentage is
applied twice and the bar renders short.
## Props
## Accessibility
- Renders as `role="progressbar"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` (or marks as
indeterminate when `value === null`).
- Provide an accessible label — render a `` (wired to the root via `aria-labelledby` automatically),
set `aria-label` on `