Progress

function Progress(__namedParameters): Element;

Horizontal progress bar with determinate and indeterminate modes.

In determinate mode the filled / empty proportions are rendered as two Box elements whose widths are controlled by Yoga (percentage + flexGrow). This means the bar resizes instantly on terminal resize with no extra React render cycle.

In indeterminate mode the marquee animation uses useLayout to read the exact track width. The 100 ms animation timer provides frequent re-renders so any stale value is corrected quickly.

Parameters

Parameter	Type
__namedParameters	ProgressProps

Returns

Element

Examples

// Determinate progress
<Progress value={0.65} showPercent label="Downloading" />

// Indeterminate marquee
<Progress indeterminate label="Loading..." />

---

Properties

Property	Type	Description
empty?	string	Character(s) for the empty portion. Default ”░”.
filled?	string	Character(s) for the filled portion. Default ”█”.
indeterminate?	boolean	Animate as indeterminate (marquee). Default false.
label?	string	Optional label text displayed before the bar.
showPercent?	boolean	Show percentage text after the bar. Default false.
style?	Style	Outer container style.
value?	number	Progress value 0..1. Omit when indeterminate.
width?	DimensionValue	Width of the progress bar. Default “100%”.