Small Top Progress Bar Component In Pure JS – bar-of-progress

bar-of-progress is a pure JavaScript component that displays a progress bar/loading indicator on the top of the page just like Youtube.

How to use it:

Install and import the package.

# NPM
$ npm install @badrap/bar-of-progress --save

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

Or insert the UMD version of the bar-of-progress library from a CDN.

<script src="https://unpkg.com/@badrap/[email protected]/dist/index.umd.js"></script>

Initialize the bar-of-progress.

// es module
const progress = new ProgressBar();
// umd
const progress = new barOfProgress();

Start the progress bar.

progress.start();

Finish the progress bar.

progress.finish();

Customize the progress bar during init.

const progress = new barOfProgress({
      // bar height
      size: 2,
  
      // background color
      color: "#29e",
      
      // default class of the progress bar
      className: "bar-of-progress",
      
      // the time to wait before the progress bar
      delay: 80
      
});