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

Category: Javascript , Loading | April 25, 2019
Views Total:743 views
Official Page:Go to website
Last Update:April 25, 2019


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 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="[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.


Finish the progress bar.


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

You Might Be Interested In:

Leave a Reply