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

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.