Indicate progress with Progress Bars!
Progress bars
You can edit bars values and colors with data-attributes used with the following HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-progressBar"> <div class="ct-progressBar-content"> <div class="progress"> <div class="progress-bar animating" role="progressbar" data-percentage="51" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> <span>WebDesign</span> <div class="ct-progressBar-percent"> <span>51%</span> </div> </div> </div> </div> </div> |
The following script is responsible for proper work of Progress Bars:
|
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 |
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); }); }); } |