Progress bar

Pixel progress bar: determinate with a hot leading edge and a green sweep at 100%, or an indeterminate comet when there is no value.

View as Markdown

<PxProgress />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxProgress />

Props

valuelive

labellive

doneLabellive

React

<PxProgress
  value={38}
  label="Uploading dataset"
  doneLabel="Upload complete"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-progress

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-progress.json

Usage

px-progress-example.tsx

import { PxProgress } from "@/components/lumesec/px-progress";

export function Example() {
  return <PxProgress value={38} label="Uploading dataset" doneLabel="Upload complete" />;
}

Behaviour

Determinate with a hot leading edge and a green sweep when it finishes, or indeterminate (no value) as a moving comet.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

valueTypenumber | null

Progress from 0 to 100, clamped; the bar glides to it. null or leaving it out shows the indeterminate comet.

labelTypestringDefault"Uploading"

Text above the bar, and the bar's accessible name.

doneLabelTypestringDefault"Complete"

Text shown once value reaches 100.

onCompleteType() => void

Called when value reaches 100, including on mount when it starts there, and again each time it returns to 100.

Ref

ref points at the root HTMLDivElement.

Accessibility

The bar is a canvas with role="progressbar", aria-valuemin="0", aria-valuemax="100", aria-valuenow (left out when indeterminate) and aria-label from label.
There is no live region; the completion text is not announced.
Reduced motion: the bar jumps to each value, the finish sweep is skipped and the indeterminate comet holds still mid-track.