@yetnt/progressbar

progressbar

A progress bar creator in javascript typescript!

NOTE: All examples and explanations are in javascript.

Installation

npm i @yetnt/progressbar

(Jump To)

• A Simple Bar
• Seperated Bar

Usage (examples below this)

const { progressBar, ProgressBar } = require('@yetnt/progressbar')

progressBar(percentage, barWidth, emptyChars, fullChars, returnAr?, firstEdgeOverride?, lastEdgeOverride?)

percentage = 45 // How much of the bar is full. If 100% the whole thing is full. If 0 everything is empty.
barWidth = 10 // Width of the bar. If 10 it's 10 characters long
emptyChars = "□" // Empty character to display for parts of the bar that aren't filled.
fullChars = "■" // Full character to display for parts of the bar that  are filled.
returnAr = false // (optional) Return an array or not
firstEdgeOverride = ["◁", "◀"] // (optional) Overrides the first edge with the elements
lastEdgeOverride = ["▷", "▶"] // (optional) Overrides the last edge with elements

// This is exactly the same for class, but returnAr is not a parameter

let bar = new ProgressBar(percentage, barWidth, emptyChars, fullChars, firstEdgeOverride?, lastEdgeOverride?)

or if you don't want to deconstruct them (for some reason)

const pb = require("@yetnt/progressbar");
pb.progressBar();
// or
new pb.ProgressBar();

A Simple bar

Function

progressBar(45, 10, "□", "■");

Class

let bar = new ProgressBar(45, 10, "□", "■");
bar.bar;

Output

"■■■■□□□□□□";

Return Array

Function

progressBar(45, 10, "□", "■", true);

Class

let bar = new ProgressBar(45, 10, "□", "■", true);
bar.barArray;

Output

["■", "■", "■", "■", "□", "□", "□", "□", "□", "□"];

Edge overrides

If you'd like you can also change the first bar element and the last bar element so you can edge it with emojis or something else.

Edge Syntax

["emptyChar", "filledChar"];

Edge Use

Function

progressBar(56, 30, "▢", "▧", false, ["◁", "◀"], ["▷", "▶"]);

Class

let bar = new ProgressBar(56, 30, "▢", "▧", ["◁", "◀"], ["▷", "▶"]);
bar.bar;

Output

"◀▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▢▢▢▢▢▷";

Differences

Dynamic Bar

Unlike the function, If you update the percentage or barWidth property of the ProgessBar object, the bar updates.

let bar = new ProgressBar(56, 30, "▢", "▧", ["◁", "◀"], ["▷", "▶"]);
bar.bar; // ◀▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▢▢▢▢▢▷
bar.barWidth = 20;
bar.bar; // ◀▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▷
bar.percentage = 80;
bar.bar; // ◀▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▷

Warning : Bar may not work properly if you edit any other properties that aren't meant to be edited.

Seprated Bar (charsplit method)

To seprate a bar with some value (Replace the last filled char), you can use the charSplit() method.

let bar = new ProgressBar(56, 30, "▢", "▧");
bar.bar; // ▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▢▢▢▢▢▢
bar.charSplit("▶");
bar.bar; // ▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▶▢▢▢▢▢▢▢▢▢▢▢▢▢▢

The bar will NOT charSplit if :

1. Last Edge Override is provided

   AND

2. Bar's percentage is 100%

Links

NPM

Math on a progress bar

Github