Data display

Progress

Shows how far a task has come. role="progressbar" with the value exposed to screen readers; without a value it is indeterminate (a pixel band glides across). CSS only; the bar grows with a GPU transform.

Uploading assets64%

Building registry65%

demos/progress.tsx

import { Progress } from "pixelbits/progress";

export default function Demo() {
  return (
    <div className="grid w-full max-w-md gap-5">
      <Progress label="Uploading assets" value={64} />
      <Progress label="Building registry" value={26} max={40} variant="pixel" />
      <Progress aria-label="Loading" />
    </div>
  );
}

Installation

npm: import

import { Progress } from "pixelbits/progress";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/progress.json

API

<Progress>

Example

<Progress label="Uploading assets" value={64} />
<Progress label="Building registry" value={26} max={40} variant="pixel" />

Prop	Type	Default	Description
value	number	—	Current value between 0 and `max`. Omit for an indeterminate bar.
max	number	100	The value that means done.
variant	"bar" \| "pixel"	"bar"	`"bar"`: a thin continuous bar. `"pixel"`: a row of squares that light up, with a few flickering at the edge.
segments	number	40	Number of squares for the `"pixel"` variant.
label	ReactNode	—	Visible label above the bar; also its accessible name.
showValue	boolean	true	Show the value (as a percent) next to the label.
aria-label	string	—	Accessible name when there is no visible `label`.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.