Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/badrap/bar-of-progress
A small, easy & zero-dependency progress bar component
https://github.com/badrap/bar-of-progress
javascript progress-bar typescript zero-dependency
Last synced: about 2 months ago
JSON representation
A small, easy & zero-dependency progress bar component
- Host: GitHub
- URL: https://github.com/badrap/bar-of-progress
- Owner: badrap
- License: mit
- Created: 2019-04-12T10:49:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T17:39:41.000Z (3 months ago)
- Last Synced: 2024-07-24T17:35:02.784Z (about 2 months ago)
- Topics: javascript, progress-bar, typescript, zero-dependency
- Language: TypeScript
- Homepage:
- Size: 634 KB
- Stars: 247
- Watchers: 7
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bar-of-progress [](https://github.com/badrap/bar-of-progress/actions?query=workflow%3Atests) [](https://www.npmjs.com/package/@badrap/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
```sh
$ npm i @badrap/bar-of-progress
```
## Usage
Import the package and create a progress bar instance:
```js
import ProgressBar from "@badrap/bar-of-progress";
const progress = new ProgressBar();
```
Show the progress bar and begin animating it by calling the `.start()` method.
```js
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](#customization).
End the progress bar animation by calling the `.finish()` method:
```js
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:
```js
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](./LICENSE).