jQuery Plugin To Manipulate Bootstrap Progress Bars

File Size: 9.77 KB
Views Total: 7563
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Manipulate Bootstrap Progress Bars

A jQuery & Bootstrap plugin used to dynamically generates easy-to-manipulate Bootstrap progress bars on the webpage. Supports animated, stripped and stacked progress bars.

How to use it:

1. The plugin requires jQuery library and Bootstrap framework.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Create an empty container to place the progress bar.

<div id="demo">

3. The JavaScript to render a basic progress bar inside the DIV container.

myBar = $('#demo').progressbarManager({      
  totalValue : 100

4. Config the progress bar using the following options.

myBar = $('#demo').progressbarManager({      

  // whether to log to console
  debug : false ,

  // for the default bar 
  currentValue : 0,

  // for the default bar 
  totalValue : 100 ,

  // for the default bar 
  style : 'primary' ,

  // for default bar
  animate : false ,

  // for default bar
  stripe : false ,

  // Progress element id
  id : 'pbm-bootsrap-progress-' +  $.fn.progressbarManager.GUID ,

  // prefix for the genrated bar id
  barIdPrefix : 'pbm-progress-bar-' ,

  // This option is for stacked progress bar. the total value of the progress
  total : opts.totalValue ,

  // Whether to create default bar
  addDefaultBar : true


5. Callback functions.

myBar = $('#demo').progressbarManager({      

  // this called when Prohgress.showValue() method is called
  showValueHandler : function(bar){
      var value = bar.elem.attr('aria-valuenow')+'%';
      bar.elem.text( value );

  // this called when Prohgress.hideValue() method is called
  hideValueHandler : function(bar){
      bar.elem.text( '' );

  // callback that is fired when the value reaches total
  // if using the stack progress bar features , this is fired when all the bars are completed
  onComplete : function(){

  onBarComplete : function(){

6. Update the progress bar and set to a new value.


7. Add a stacked progress bar.

  // options here

This awesome jQuery plugin is developed by hollax. For more Advanced Usages, please check the demo page or visit the official website.