@dinoabsoluto/flex-progress NPM

flex-progress

CLI progress bar made simple

An object-oriented approach to progress bar.

Simple: no template, no ticking, just change the ratio property and you're good to go.
Theme: personalize with colors and style.
Object-oriented: each element is an object, updating its data leads to updating the output. No need to care about what other elements are doing.

const FlexProgress = require('@dinoabsoluto/flex-progress')
// ESModules or Typescript
// import * as FlexProgress from '@dinoabsoluto/flex-progress'

const out = new FlexProgress.Output()
const bar = new FlexProgress.Bar({ width: 25 })

out.append(
  1, new FlexProgress.Spinner(),
  1, 'Hello World!',
  1, new FlexProgress.Spinner(),
  1, '⸨', bar, '⸩'
)

let count = 0
const loop = setInterval(() => {
  count++
  bar.ratio = (count % 39) / 38
}, 80)

NOTE: The images above are screen captures of the demos in folder examples.

Concept: Why is it flex-progress?

This was inspired by CSS Flexbox concept, although much simpler.

Basically, all elements have flexShrink and flexGrow properties, which controls how much they shrink/grow. (flex is a shorthand for both)

In most case, you'll want your progress Bar to have fixed width and a Text with flexShrink set to 1. This way, your text will fill up the CLI width, but will truncate at the end of the line.