Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/progress-bar.jsonUsage
import { ProgressBar } from "@/components/dithercn/progress-bar";
export function Upload({ percent }: { percent: number }) {
return <ProgressBar label="Uploading report.pdf" value={percent} />;
}value runs from 0 to max, which is 100 unless you set it. The fill sits on a faint track in the same colour. With fill="gradient" it is solid at the leading edge and thins out behind it; dotted, hatched and solid fill evenly. Every texture ends in a solid one-cell cap, so the exact value is always readable. The fill grows in on mount and eases between values.
Leave value out when you can't measure progress. The bar becomes indeterminate: a comet with a dense head and a dithered tail sweeps across the track.
<ProgressBar label="Indexing repository" />Examples
Usage card
parts stacks several values in one bar, each in its own colour, with a legend underneath. Here storage is split by file type. Build minutes are close to the limit, so that bar uses color="red", fill="hatched" and a low bloom.
Upload list
Three states at size="lg": a finished file in solid green, one in progress, and an indeterminate step while the server transcodes.
Onboarding steps
segments cuts the bar into blocks a cell apart. With one block per task, three of five tasks fill three blocks.
Props
| Prop | Type | Default |
|---|---|---|
| label* What is in progress. Shown above the bar and used as its accessible name. | Type: string | Default – |
| value Progress from 0 to max. Leave it out for an indeterminate bar. | Type: number | null | Default – |
| parts { label: string; value: number; color?: DitherColor; fill?: FillVariant }, stacked left to right instead of value. | Type: ProgressPart[] | Default – |
| unit With parts: shown after each value in the legend, such as " GB". | Type: string | Default – |
| max The value that means done, or the capacity for parts. | Type: number | Default 100 |
| valueText Text for the readout and for screen readers. | Type: string | Default The percentage |
| hideLabel Hide the label and readout visually. Screen readers still get them. | Type: boolean | Default false |
| size Bar height: 2, 4 or 6 cells. | Type: "sm" | "md" | "lg" | Default "md" |
| fill Texture of the fill. Gradient is densest at the leading edge. | Type: "gradient" | "dotted" | "hatched" | "solid" | Default "gradient" |
| color Colour of the fill and its track, a palette name or any CSS colour. | Type: DitherColor | Default "ink" |
| bloom Soft glow in the fill's colour. | Type: "off" | "low" | "high" | Default "off" |
| segments Cut the bar into this many blocks a cell apart, for step meters. | Type: number | Default – |
| animate Grow in on mount and ease between values. | Type: boolean | Default true |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
Notes
- The root has
role="progressbar", is named by the label and reports the value (orvalueText). An indeterminate bar leaves out the value, as assistive technology expects. - Width changes ease over 600ms; the comet moves only by transform. With reduced motion the fill jumps to its value and the comet rests in the middle of the track.
- It is plain HTML with CSS masks: no SVG, canvas or animation loop.