topbar

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

optional: also available for Bower (bower install topbar) and Browserify (npm install topbar).

Call topbar.show() to show and topbar.hide() to hide the progress bar. Before topbar.hide() is called, the progress bar will move slower and slower but never actually reach 100%. Most of the time, these 2 methods are all you need.

$('#btnStartSimple').click(function() {
  topbar.show()
})

$('#btnStopSimple').click(function() {
  topbar.hide()  
})

Use topbar.config(options) to customize topbar.

• autoRun (default: true): if false, call topbar.progress() manually to run.
• barThickness (default: 3): the progress bar thickness.
• barColors: list of gradient color stops used to draw the progress bar.
• shadowBlur (default: 10): the shadow blur.
• shadowColor: the shadow color.

Note: topbar.progress() can take a number or string value. If string, you can use + or - to change the progress relatively to current position. If no argument is specified, return the current progress (0 to 1).

$('#btnStartAdvanced').click(function() {
  topbar.config({
    autoRun      : false, 
    barThickness : 5,
    barColors    : {
      '0'        : 'rgba(26,  188, 156, .7)',
      '.3'       : 'rgba(41,  128, 185, .7)',
      '1.0'      : 'rgba(231, 76,  60,  .7)'
    },
    shadowBlur   : 5,
    shadowColor  : 'rgba(0, 0, 0, .5)'
  })
  topbar.show();
  (function step() {
    setTimeout(function() {  
      if (topbar.progress('+.01') < 1) step()
    }, 16)
  })()
})

$('#btnStopAdvanced').click(function() {
  topbar.hide()  
})