bar-of-progress

A small, easy & zero-dependency progress bar component.

Features

Zero dependencies: Also not tied to any framework in particular.
Small size: < 500 bytes with Brotli (< 600 bytes gzipped).
Easy to use: Just a couple of lines and off you go. And TypeScript types are now available as well!

Note
We consider this package to be feature-complete, and as such we're not taking in any new feature requests or suggestions. Please use the issue tracker for bug reports and security concerns, which we highly value and welcome. Thank you for your understanding ❤️

Installation

$ npm i @badrap/bar-of-progress

Usage

Import the package and create a progress bar instance:

import ProgressBar from "@badrap/bar-of-progress";

const progress = new ProgressBar();

Show the progress bar and begin animating it by calling the .start() method.

progress.start();

Note
By default the progress bar does not appear immediately when .start() is called. Instead there is a 80 millisecond grace period, allowing very quickly completed tasks to avoid showing the progress bar. You can modify this (and other) behavior, see Customization.

End the progress bar animation by calling the .finish() method:

setTimeout(() => {
  progress.finish();
}, 1000);

You can reuse a progress instance multiple times - every time .start() gets called the progress bar starts animation from scratch.

Customization

The progress bar's appearance and behavior can be (slightly) customized with constructor parameters. Here are the different options and their default values:

const progress = new ProgressBar({
  // The size (height) of the progress bar.
  // Numeric values get converted to px.
  size: 2,

  // Color of the progress bar.
  // Also used for the glow around the bar.
  color: "#29e",

  // Class name used for the progress bar element.
  className: "bar-of-progress",

  // How many milliseconds to wait before the progress bar
  // animation starts after calling .start().
  delay: 80,
});

License

This library is licensed under the MIT license. See LICENSE.

badrap/bar-of-progress

badrap

Reviews

Repository Details