ProgressBar

Terminal progress bar with determinate and indeterminate (animated bounce) modes. Auto-sizes to available width.

Import

import { ProgressBar } from "silvery"

Usage

// Determinate — shows filled progress
<ProgressBar value={0.5} />

// Indeterminate — animated bouncing block
<ProgressBar />

// With label and color
<ProgressBar value={0.75} color="green" label="Downloading..." />

Props

Prop	Type	Default	Description
value	number	—	Progress 0-1 (omit for indeterminate animation)
width	number	available width	Width in columns
fillChar	string	"█"	Character for the filled portion
emptyChar	string	"░"	Character for the empty portion
showPercentage	boolean	true for determinate	Show percentage label
label	string	—	Label text before the bar
color	string	—	Color of the filled portion

Modes

Determinate

When value is provided (0-1), the bar shows a filled portion proportional to the value.

Downloading... ████████████░░░░░░░░░░░░░░░░░░  40%

Indeterminate

When value is omitted, the bar shows an animated bouncing block that moves back and forth.

Loading... ░░░░░░████░░░░░░░░░░░░░░░░░░░░

Examples

Download Progress

<ProgressBar value={bytesReceived / totalBytes} label="Downloading..." color="$primary" />

File Processing

<Box flexDirection="column" gap={1}>
  <Text>
    Processing files ({processed}/{total})
  </Text>
  <ProgressBar value={processed / total} />
</Box>

Indeterminate Loading

<ProgressBar label="Connecting..." />

Custom Characters

<ProgressBar value={0.6} fillChar="=" emptyChar="-" showPercentage={false} />

Output: ============------------------