LogF-Progress ·

Simple terminal progress bar. Usable standalone or with other log-frame components.

Install

npm install logf-progress

Usage

This example produces the animation above. A CompositeLogView and RawLogView from log-frame are used to add a label to the progress bar. The same CompositeLogView can be used to add spinners or other components.

const { LogFrame, CompositeLogView, RawLogView } = require('log-frame');
const { ProgressBar } = require('logf-progress');

// create a container for the progress bar and label.
const root = new CompositeLogView();

// attach the container to a frame for display.
const frame = new LogFrame();
frame.view = root;

// create and add the bar and label to the container.
const bar = new ProgressBar();
const label = new RawLogView();
root.addChild(bar);
root.addChild(label);

// update the label with a message
label.content = ' - Downloading';

// simulating a download
let progress = 0;
const interval = setInterval(() => {
  progress += 0.05;

  // update the progress bar
  bar.progress = progress;

  // on completion, clear the interval, update the label,
  //  and animate the progress bar closed.
  if (progress > 1) {
    clearInterval(interval);

    label.content = ' - Completed!';
    bar.setWidth(0, {
      duration: 800,
    });
  }
}, 50);

API

new ProgressBar(theme, options)

theme (optional)

An object defining the theme to use:

{
    startCap: '[',
    endCap: ']',
    complete: '#',
    remaining: '-',
    divider: '|',
}

// [###|-------]

Defaults to the above with no divider. Can be referenced with ProgressBarStyle.simple.

options (optional)

{
  width: 30; // optional, define the initial width. defaults is 40
}

Properties

.width (number)

.progress (number, 0.0 - 1.0)

Animation

Width and progress are animatable using the following methods.

• .setWidth(toValue, options, completion)
• .setProgress(toValue, options, completion)

toValue (required)

The target value being animated to.

options (required)

{
  // required, duration in milliseconds of the animation
  duration: 500,
  // optional, easing method taking a number, 0.0 - 1.0, and
  //  returning an 'eased' number, 0.0 - 1.0. `linear` and
  //  `easeInOut` are included under the `Easing` object.
  //  Default is `Easing.easeInOut`.
  easing: Easing.easeInOut,
}

completion (optional)

Called when the animation is completed.