ComponentsProgress
Progress
stableHorizontal progress bar with determinate and indeterminate modes.
Browser preview is a simulation. The copied component runs in actual terminal apps.
progress.tsx
Animated:░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░0%
Static:████████████████████░░░░░░░░░░65%
Complete:██████████████████████████████100%
progress.tsx
Installation
npx orizen-tui@latest add progress
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/progress.tsx
Usage
progress.imports.tsx
progress.example.tsx
Examples
Usage
progress.example1.tsx
Animated:░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░0%
Static:████████████████████░░░░░░░░░░65%
Complete:██████████████████████████████100%
progress.example1.tsx
API Reference
Progress
PropTypeDefaultDescription
valuenumberundefinedCurrent value (omit for indeterminate)
valueundefined
numberCurrent value (omit for indeterminate)
maxnumber100Maximum value
max100
numberMaximum value
widthnumber40Bar width in columns
width40
numberBar width in columns
labelstringundefinedLabel before the bar
labelundefined
stringLabel before the bar
showPercentbooleantrueShow percentage after bar
showPercenttrue
booleanShow percentage after bar