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

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

Preview:

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

Description:

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
      
});

You Might Be Interested In:


Leave a Reply