https://github.com/uiuxarghya/progress-bar

A small, easy & zero-dependency progress bar component.
https://github.com/uiuxarghya/progress-bar

animation javascript progress progress-bar progress-bar-component progress-bar-react progress-bars progressbar typescript uiuxarghya

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/uiuxarghya/progress-bar
• Owner: uiuxarghya
• License: mit
• Created: 2022-05-21T19:18:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-14T06:38:54.000Z (5 months ago)
• Last Synced: 2024-10-31T17:17:54.211Z (2 months ago)
• Topics: animation, javascript, progress, progress-bar, progress-bar-component, progress-bar-react, progress-bars, progressbar, typescript, uiuxarghya
• Language: TypeScript
• Homepage: https://npm.im/@uiuxarghya/progress-bar
• Size: 1.37 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# progress-bar [![tests](https://github.com/uiuxarghya/progress-bar/workflows/tests/badge.svg)](https://github.com/uiuxarghya/progress-bar/actions?query=workflow%3Atests) [![npm](https://img.shields.io/npm/v/@uiuxarghya/progress-bar.svg)](https://www.npmjs.com/package/@uiuxarghya/progress-bar) [![jsdeliver hits](https://data.jsdelivr.com/v1/package/npm/@uiuxarghya/progress-bar/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiuxarghya/progress-bar)

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

![Progress Bar Demo](https://raw.githubusercontent.com/uiuxarghya/progress-bar/main/.github/progress-bar-demo.gif)

## 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

```sh

bun i @uiuxarghya/progress-bar 

# npm i @uiuxarghya/progress-bar

# yarn add @uiuxarghya/progress-bar

```

## Usage

Import the package and create a progress bar instance:

```js

import ProgressBar from '@uiuxarghya/progress-bar';

const progress = new ProgressBar();

```

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

```js

progress.start();

```

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: '#0cf',

  // Class name used for the progress bar element.

  className: 'progress-bar',

  // 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).