Visualize,

Why create something as simple as Crimson Progress Bar? It might seem simple but the issue comes from the fact that sometimes when I created Node backends I like to be able to see what happens in the console.

Let’s say for example we have a backend of an A* pathfinding algorithm for a game. The user wants to see what is the most optimized way to go from point A to point B. While doing some tests I find it more compelling to have a visual representation of whats happening.

For instance a progress bar for loading all the world maps. I wanted something simple and easy to use and still customizable so that it can be reused in other projects or wherever needed.

Currently I have implemented it in Dux Documentation to see the progression rate in the number of MD files converted.


npm i crimson-progressbar

Responsive Example

 

Function Information

renderProgressBar takes two parameters minimum the rest is optional:

  • currentValue
  • totalValue
  • progressColor
  • backgroundColor
  • progressSymbol (one char max)
  • backgroundSymbol (one char max)
  • renderContainer (show [] around progress bar = bool)
  • progressSize (string see below)

Colors Available

  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white
  • gray
  • grey

Progess Bar Size

Here are the sizes you can pass to the progressSize they will all be responsive

  • “xsmall”
  • “small”
  • “medium”
  • “large”
  • “xlarge”

Code Example


const crimsonProgressBar = require("crimson-progressbar");
crimsonProgressBar.renderProgressBar(50, 100);

For more examples please check GitHub or NPM

View on GitHub

View on NPM