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

Category: Javascript , Loading | April 25, 2019
Author: badrap
Views Total: 685
Official Page: Go to website
Last Update: April 25, 2019
License: MIT


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