Skip to content

ProgressBar ​

A terminal progress bar with determinate and indeterminate modes. Uses useBoxRectDangerously for responsive width.

Import ​

tsx
import { ProgressBar } from "silvery"

Props ​

PropTypeDefaultDescription
valuenumber--Progress value 0-1 (omit for indeterminate)
widthnumberautoWidth in columns (uses available width via useBoxRectDangerously)
fillCharstring"█"Fill character
emptyCharstring"░"Empty character
showPercentagebooleanautoShow percentage label (defaults to true for determinate)
labelstring--Label text
colorstring--Color of the filled portion

Usage ​

tsx
// Determinate
<ProgressBar value={0.5} />
<ProgressBar value={0.75} color="green" label="Downloading..." />

// Indeterminate (animated bouncing block)
<ProgressBar />

// Custom characters
<ProgressBar value={0.6} fillChar="=" emptyChar="-" />

See Also ​

  • Meter -- level/utilization gauge with a segment-fitted overlay label (the <meter> to this <progress>)
  • Spinner -- animated loading indicator