Segmented progressPro
An LCD style segmented bar for queued and running jobs, with a tabular percent and five states.
On this page
ProA render queue with one job on the LCD meter and every status in the list.
Installation
Usage
import { SegmentedProgress } from "@/components/ui/chatcn/pro/segmented-progress"
<SegmentedProgress value={job.progress} status={job.status} label={job.name} />Examples
States
ProQueued, running, paused, done, failed and empty, sizes, a bare bar and a long label.
States
| Status | Shows |
|---|---|
queued | Clock and Queued, empty segments, detail in place of the percent |
running | Accent segments, the next one blinking at the share already done |
paused | Pause and Paused, segments in gray |
done | Check and Done, every segment green |
failed | Cross and Failed, tinted segments with the one where it stopped in red |
Props
| Prop | Type | Notes |
|---|---|---|
value | number | Progress from 0 to max |
max | number | Default 100 |
status | SegmentedProgressStatus | Defaults to done at max, otherwise running |
segments | number | Default 24 |
size | "sm" | "md" | "lg" | 4, 8 or 16 px tall. lg is the LCD meter |
label | ReactNode | One line, cut at the end |
detail | ReactNode | Replaces the percent: "3rd in queue", "12 of 12" |
statusLabels | Partial<Record<status, string>> | Translated status words |
showStatus, showValue | boolean | Default true |
ticks | boolean | Scale marks at 0, 25, 50, 75 and 100 |
Keyboard
Not interactive.
Accessibility
role="progressbar"witharia-valuenowand a value text such as "43%, Running". Queued has no value yet.- Every state has a word, and all but running an icon, so color is never the only cue.
- Under
forced-colorssegments draw as outlined boxes, filled inCanvasText.
Motion
- Segments fill whole with a 150 ms color fade. The leading segment blinks like an LCD cursor at 1.2 s while running and holds still under reduced motion.