Progress
Updated
Progress is a progress bar in an ink frame. Its solid fill fades out through a Bayer dither ramp at the leading edge, and without a value the fill marches across. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
Upload
Import
Syncing
import "@/components/dithercharts/controls.css"
import { Progress } from "@/components/dithercharts/progress"
<Progress label="Upload" value={62} />
<Progress label="Import" value={18} />
<Progress label="Syncing" />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add progress
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the bar, and the bar's accessible name. |
| value | Type number | Default – | How far along, from 0 to max. Leave it out while the total is unknown, and the fill marches instead. |
| max | Type number | Default 100 | The value that means done. |
| showValue | Type boolean | Default true | Shows the percentage beside the label. |
| className | Type string | Default – |