---
title: Progress
description: "Astro progress tracks for a known value or an unknown completion time."
seo:
    title: "Progress for Astro — examples and usage"
---

```astro
---
import {
  Progress,
  ProgressLabel,
  ProgressValue,
  ProgressTrack,
  ProgressIndicator,
} from "@/components/ui/progress"
---

<div class="grid w-full max-w-sm gap-6">
  <Progress value={65} aria-labelledby="export-label">
    <div class="flex justify-between">
      <ProgressLabel id="export-label">Files exported</ProgressLabel>
      <ProgressValue>65%</ProgressValue>
    </div>
    <ProgressTrack>
      <ProgressIndicator />
    </ProgressTrack>
  </Progress>
  <Progress aria-label="Preparing the export" />
  <Progress value={100} aria-label="Previous export complete" />
</div>
```

## Installation

```sh
bunx --bun shadcn@latest add @gnosticai/progress
```

## Usage

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

Use the Code tab above for the complete Astro composition.

## API reference

Read the [registry source](/r/progress.json) for the exported parts and prop types.

## When to use Progress

Pass a value between min and max for measured progress. Omit value or pass null for an indeterminate task. The root supplies a default track and indicator; use the exported parts when you need a custom label layout.

## Keyboard and behavior

Give the root `aria-label` or connect it to visible text with `aria-labelledby`. Values are clamped to the range, and indeterminate progress omits `aria-valuenow`. The component renders the initial value; live updates must keep the ARIA value and `--progress-percentage` in step.

## Theme and layout

The indicator uses the primary token and the track uses input color. A reduced-motion preference removes its animation. Never invent a percentage when the task cannot report progress.

## Related choices

Use [Meter](/components/meter) for a measured level such as capacity and [Spinner](/components/spinner) for a compact pending indicator.