To create progress bar use the following HTML markup:
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar animating" role="progressbar" data-percentage="90" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> <span>Web Design <strong>90%</strong></span> </div> </div> |
Progress Bars
Also don’t forget to include the javascript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
(function ($) { "use strict"; $(document).ready(function(){ // Progress Bar // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //$('.progress-bar').progressbar(); if (jQuery().appear && jQuery("body").hasClass("cssAnimate")) { jQuery('.progress').appear(function () { var $this = jQuery(this); $this.each(function () { var $innerbar = $this.find(".progress-bar"); var percentage = $innerbar.attr("data-percentage"); $innerbar.addClass("animating").css("width", percentage + "%"); $innerbar.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () { $innerbar.find(".pull-right").fadeIn(900); }); }); }, {accY: -100}); } else { jQuery('.progress').each(function () { var $this = jQuery(this); var $innerbar = $this.find(".progress-bar"); var percentage = $innerbar.attr("data-percentage"); $innerbar.addClass("animating").css("width", percentage + "%"); $innerbar.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () { $innerbar.find(".pull-right").fadeIn(900); }); }); } }); // /document.ready })(jQuery); |