Progress

A bar that fills as a task moves toward done.

ui.progresscomponents/ui/progress.tsx

Use case

For the AI

Use it while something advances to an end you can count: a file uploading, an import of 400 clients from a spreadsheet, a batch of invoices sent one by one. ProgressLabel says what is happening and ProgressValue prints the percentage above the track. With value={null} it is indeterminate and draws an empty track, so for a wait of unknown length a Spinner says more.

Use it when

An upload or an import of a known size
A batch where you can count what is done
A setup in steps that reports how far it got

Use something else when

A measure within a range that does not finish (storage used, hours left this month): Meter
A wait of unknown length: Spinner
Content is loading and its shape is known: Skeleton
Saying the task finished: Toast

Examples

Uploading mood.png

Code

Import

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

Usage

export function UploadProgress({ name, percent }: { name: string; percent: number }) {
  return (
    <Progress value={percent}>
      <div className="flex justify-between text-[12.5px]">
        <ProgressLabel className="text-ink-3">Uploading {name}</ProgressLabel>
        <ProgressValue className="tabular-nums text-ink-4" />
      </div>
      <ProgressTrack className="mt-2">
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  )
}

export function ImportProgress({ done, total }: { done: number; total: number }) {
  return <Progress value={done} max={total} aria-label="Importing clients" />
}

Rules

value runs from min to max (0 to 100 by default) and only moves forward with the task; the indicator eases to each new value.
Name the task with ProgressLabel; ProgressValue prints the percentage in tabular figures.
With no label in view, give Progress an aria-label.
Progress with no children draws the bare track and indicator.