Braille progressPro
Determinate progress drawn with braille characters at eight steps per character, for terminal styled surfaces.
On this page
ProModel weights downloading in a terminal at eight steps per character.
Installation
Usage
import { BrailleProgress } from "@/components/ui/chatcn/pro/braille-progress"
<BrailleProgress value={bytes} max={total} label="unet.safetensors" />A 20 character bar resolves 160 steps, finer than block characters. It is real text, so it copies into a log as is. Leave value undefined for work of unknown length and the bar sweeps.
Examples
States
ProSub-steps, every status, unknown length, track styles and a long label.
Props
| Prop | Type | Notes |
|---|---|---|
value | number | null | Progress from 0 to max. Undefined sweeps |
max | number | Default 100 |
width | number | Bar width in characters. Default 20 |
status | "running" | "paused" | "done" | "failed" | Defaults to done at max, otherwise running |
label | ReactNode | Text before the bar |
showValue | boolean | The tabular percent. Default true |
track | "dots" | "line" | "none" | How unfilled cells look. Default dots |
Keyboard
Not interactive.
Accessibility
role="progressbar"witharia-valuenowand a value text such as "71%, failed". Without a value it has noaria-valuenow, the indeterminate pattern.- Paused, done and failed print their word after the percent, so status never depends on color.
Motion
- The fill moves one dot at a time as the value changes; there is no tween to fake smoothness.
- The unknown length sweep ticks every 60 ms and stops while the tab is hidden. Under reduced motion it holds still.