Customizable Top Loading Progress Bar – topbar

Preview:

Description:

topbar is a standalone JavaScript plugin to generates a canvas based top progress bar that represents the current loading status of your web page. Ideal for page loader, ajax loader and more.

How to use it:

Install and import the topbar into your document.

# NPM
$ npm install topbar --save
# Bower
$ bower install topbar --save

<script src="topbar.js"></script>

Customize the top progress bar with the following settings.

topbar.config({
  autoRun      : true,
  barThickness : 3,
  barColors    : {
      '0'      : 'rgba(26,  188, 156, .9)',
      '.25'    : 'rgba(52,  152, 219, .9)',
      '.50'    : 'rgba(241, 196, 15,  .9)',
      '.75'    : 'rgba(230, 126, 34,  .9)',
      '1.0'    : 'rgba(211, 84,  0,   .9)'
  },
  shadowBlur   : 10,
  shadowColor  : 'rgba(0,   0,   0,   .6)'
})

Show the progress bar.

topbar.show();

Hide the progress bar manually.

topbar.hide()

change the progress relative to current position.

topbar.progress('+.01')
topbar.progress('-.01')

Changelog:

v1.0.1 (01/07/2021)

• Update