progressx

Download progressx.js or progressx.min.js and include it in the page.

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

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

Call progressx.show() to show and progressx.hide() to hide the progress bar. Before progressx.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() {
  progressx.show()
})

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

Use progressx.config(options) to customize progressx.

• autoRun (default: true): if false, call progressx.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: progressx.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() {
  progressx.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)'
  })
  progressx.show();
  (function step() {
    setTimeout(function() {
      if (progressx.progress('+.01') < 1) step()
    }, 16)
  })()
})

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