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!
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({
size: 2,
color: "#29e",
className: "bar-of-progress",
delay: 80,
});
License
This library is licensed under the MIT license. See LICENSE.