Progress

Astro progress tracks for a known value or an unknown completion time.

---
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

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

Usage

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

Use the Code tab above for the complete Astro composition.

API reference

Read the registry source 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 for a measured level such as capacity and Spinner for a compact pending indicator.