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.

Usage

See documents for more details.

For a simple explanation see this example.