Dither Progress
A progress bar whose leading edge breaks into pixels.
import { DitherProgress } from "@/components/dither-progress";
export function ExportRow({ progress }: { progress?: number }) {
return <DitherProgress label="Exporting hero-loop-4k.mp4" value={progress} />;
}
Installation
pnpm dlx shadcn@latest add @gradients-pro/dither-progressNeeds a Pro account and the Pro registry setup.
Usage
import { DitherProgress } from "@/components/dither-progress";
<DitherProgress label="Uploading assets" value={40} />;Leave out value for an indeterminate bar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | none | 0 to 100. Leave it out for an indeterminate bar. |
label | string | required | Accessible name, such as "Uploading assets". |
height | number | 6 | Track height in CSS pixels. |
palette | "ultramarine" | "ember" | "mono" | string[] | "ultramarine" | A curated ramp, or your own 2 to 6 CSS colours from faint to hot (var(--x) included). Curated ramps switch between a light and a dark version with your theme. |
cell | number | 2 | Size of one dither cell in CSS pixels. |
scheme | "light" | "dark" | follows the page | Forces a colour scheme. By default it reads a dark or light class (or data-theme) on <html>, then the system setting. |
className, other div props | Passed to the track. |