# Progress

Progress bar that glides smoothly to each new value and gently pulses while the amount is unknown. On reaching 100% it can fold into a done line with a check and a soft pool of light.

> Primitive · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add progress
```

## Import

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

## Variants

- `animated` — Animated: `npx @lumioui/cli add progress-animated`
- `glass` — Glass: `npx @lumioui/cli add progress-glass`
- `indeterminate` — Indeterminate: `npx @lumioui/cli add progress-indeterminate`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | 0–100 |
| `className?` | `string` | — |
| `indicatorClassName?` | `string` | Fill bar classes. |
| `indeterminate?` | `boolean` | Unknown progress — the whole track breathes in place, slowly; nothing travels. |
| `glass?` | `boolean` | Glass lane — a taller frosted pill instead of the hairline. |
| `completeLabel?` | `string` | Reaching 100 becomes a moment: a light pool blooms under the bar, it  holds, then the bar folds into this line with a drawn check. |
| `onComplete?` | `() => void` | Fires when the bar reaches 100 and its moment has held. |

Source: https://lumioui.com/components/progress