OPEN TECH FOUNDATION

The Customizable CLI Progress Bars.

---

🚀 @opentf/std - An Extensive JavaScript Standard Library. Please review and give feedback.

Please read our important articles:

• Introducing Our New JavaScript Standard Library

• You Don’t Need JavaScript Native Methods

---

Features

• Single & Multi Progress Bars

• Customizable (colors, size, etc)

• TypeScript Support

Installation

Install it using your favourite package manager.

1npm install @opentf/cli-pbar

1yarn add @opentf/cli-pbar

1pnpm add @opentf/cli-pbar

1bun add @opentf/cli-pbar

Syntax

1new ProgressBar(options?: Options)

Usage

Single progress bar.

1import { ProgressBar } from '@opentf/cli-pbar';
2
3const pBar = new ProgressBar();
4pBar.start({ total: 100 });
5pBar.update({ value: 50 });
6pBar.update({ value: 100 });
7pBar.stop();

Multi progress bar.

1import { ProgressBar } from '@opentf/cli-pbar';
2
3const multiPBar = new ProgressBar({ size: 'MEDIUM' });
4multiPBar.start();
5const b1 = multiPBar.add({ total: 100 });
6const b2 = multiPBar.add({ total: 100 });
7const b3 = multiPBar.add({ total: 100 });
8b1.update({ value: 23 });
9b3.update({ value: 35 });
10b2.update({ value: 17 });
11multiPBar.stop();

[!TIP] It is recommended to use the MEDIUM sized bars in multi progress bars to get better visuals.

Examples

Using inc() to increment the progress bar value, hide the percent & show the count.

1import { sleep, aForEach } from '@opentf/std';
2import { ProgressBar } from '@opentf/cli-pbar';
3
4const arr = ['Apple', 'Mango', 'Orange', 'Grapes', 'Pear', 'Guava'];
5
6const pBar = new ProgressBar({
7  color: 'pi',
8  bgColor: 'r',
9  showPercent: false,
10  showCount: true,
11  prefix: 'Processing Fruits',
12});
13
14pBar.start({ total: arr.length });
15
16await aForEach(arr, async (f) => {
17  pBar.inc({ suffix: f });
18  await sleep(500);
19});
20
21pBar.stop();

---

Rendering a plain variant progress bar.

1import { ProgressBar } from '@opentf/cli-pbar';
2
3const pBar = new ProgressBar({
4  variant: 'PLAIN',
5  prefix: 'Downloading',
6});
7
8pBar.start({ total: 3 });
9pBar.inc();
10pBar.stop();

---

It does not render progress bars in non TTY terminals, like CI, etc.

1import { sleep, aForEach } from '@opentf/std';
2import { ProgressBar } from '@opentf/cli-pbar';
3
4const arr = ['File 1', 'File 2', 'File 3'];
5const pBar = new ProgressBar({
6  prefix: 'Downloading',
7  showPercent: false,
8  showCount: true,
9});
10
11pBar.start({ total: arr.length });
12
13await aForEach(arr, async (f) => {
14  pBar.inc({ suffix: f });
15  await sleep(500);
16});
17
18pBar.stop();

API

options:

Name	Type	Default	Description
stream	WriteStream	process.stderr	The TTY writable stream to use.
width	number	30	The size of the progress bar.
prefix	string	''	The string to be prefixed progress bar.
suffix	string	''	The string to be suffixed progress bar.
color	string	'g'	The color to render the completed progress bar. The default color is green. It uses @opentf/cli-styles for colors. You can also use the rgb & hex color modes, please refer the supported color keys here.
bgColor	string	'gr'	The color to render the incomplete progress bar. The default color is grey. It uses @opentf/cli-styles for colors. You can also use the rgb & hex color modes, please refer the supported color keys here.
size	string	'DEFAULT'	The size of the progress bar to render. Available sizes: 'DEFAULT' 'MEDIUM' 'SMALL'
autoClear	boolean	false	If true, then it auto-clears the progress bar after the stop method is called.
showPercent	boolean	true	If false, then it hides the progress bar percent.
showCount	boolean	false	If true, then it show the progress bar count.
variant	string	'STANDARD'	There are two variants available, STANDARD & PLAIN.

Instance methods:

start(obj?: Partial<Bar>): void

After the method is called, the progress bar starts rendering.

Bar:

Name	Type	Default	Description
total	number	NaN	The total value for the progress bar.
value	number	NaN	The current value of the progress bar.
prefix	string	''	The string to be prefixed progress bar.
suffix	string	''	The string to be suffixed progress bar.
color	string	'g'	The color to render the completed progress bar. The default color is green. It uses @opentf/cli-styles for colors. You can also use the rgb & hex color modes, please refer the supported color keys here.
bgColor	string	'gr'	The color to render the incomplete progress bar. The default color is grey. It uses @opentf/cli-styles for colors. You can also use the rgb & hex color modes, please refer the supported color keys here.
size	string	'DEFAULT'	The size of the progress bar. Available sizes: 'DEFAULT' 'MEDIUM' 'SMALL'
progress	boolean	true	If false, it does not render a progress bar, making it useful to add an empty line or text without displaying a progress bar.
showPercent	boolean	true	If false, then it hides the progress bar percent.
showCount	boolean	false	If true, then it show the progress bar count.

add(bar: Partial<Bar>): { update: (bar: Partial<Bar>) => void }

In multi-progress, it appends a progress bar to the container and returns an instance.

update(bar: Partial<Bar>): void

It is used to update the current progress bar instance.

inc(bar: Partial<Bar>): void

It increments the progress bar value and optionaly updates the other bar props.

stop(msg?: string): void

Stops the current progress bar instance with the current state and optionally clears the progress bar when autoClear is true.

You can also pass msg text to be displayed after the instance stops.

Supported Color Keys

Key	Description
r	Red - rgb(255,65,54)
g	Green - rgb(46,204,64)
b	Blue - rgb(0,116,217)
o	Orange - rgb(255,133,27)
y	Yellow - rgb(255,220,0)
w	White - rgb(255,255,255)
m	Magenta - rgb(255,105,193)
c	Cyan - rgb(154, 236, 254)
n	Navy - rgb(0,31,63)
a	Aqua - rgb(127,219,255)
t	Teal - rgb(57,204,204)
p	Purple - rgb(177,13,201)
f	Fuchsia - rgb(240,18,190)
s	Silver - rgb(221,221,221)
ma	Maroon - rgb(133,20,75)
ol	Olive - rgb(61,153,112)
li	Lime - rgb(1,255,112)
bl	Black - rgb(17,17,17)
gr	Grey - rgb(170,170,170)
pi	Pink - rgb(255, 191, 203)

Related

• @opentf/std - An Extensive JavaScript Standard Library.

• @opentf/cli-styles - Style your CLI text using ANSI escape sequences.

License

Copyright (c) 2021, Thanga Ganapathy (MIT License).