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">
   
</div>

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.

myBar.setValue(30);

7. Add a stacked progress bar.

myBar.addBar({
  // options here
});

---

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