Skip to content

Progress

CSS

A thin bar for work with a known or unknown length.

Embedding documents64%
Waiting for a worker

Install

$ npx shadcn@latest add https://spotcheckui.com/r/progress.json

No motion engine needed.

Usage

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

<Progress label="Embedding documents" value={64} />
<Progress label="Waiting for a worker" />

Props

  • label * RequiredstringDefault —Names the bar for screen readers and prints above it.
  • valuenumberDefault —How far along it is. Leave it out when the amount of work is unknown.
  • maxnumberDefault 100

Keyboard

Nothing to operate: this component displays information.

Reduced motion

The bar updates without easing, and an unknown length stays still.