You can present progress made also with Progress Icons
Progress Icons
You can use them with the following HTML markup:
|
1 2 3 4 5 6 7 8 |
<div class="ct-u-paddingBottom80"> <div class="progress-icons" data-font-size="90" data-icon-color="#3eaefa" data-active="12" data-total="15" data-icon="fa-male" data-delay="200"></div> </div> <div class="ct-u-paddingBottom80"> <div class="progress-icons" data-font-size="77" data-icon-color="#fc4349" data-active="12" data-total="15" data-icon="fa-female" data-delay="250"></div> </div> |
Also remember to include required javascript:
|
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 39 40 41 42 43 44 45 46 47 48 49 |
(function ($) { "use strict"; $(document).ready(function () { // Progress Icons // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $('.progress-icons').each(function () { var $this = $(this); var $total = $this.attr("data-total"); var $icon = $this.attr("data-icon"); var htmldata = ""; $this.css("font-size", ($this.attr("data-font-size") + "px")); var i; for (i = 0; i < $total; i++) { htmldata += '<i class="fa ' + $icon + '"></i> '; } $this.html(htmldata); if (($().appear) && ($("body").hasClass("cssAnimate"))) { $('.progress-icons').appear(function () { var $this = $(this); var $active = $this.attr("data-active"); var $icons = $this.find('i:lt(' + $active + ')'); var $delay = parseInt(validatedata($this.attr("data-delay"), 20)) var delay = $delay; for (i = 0; i < $icons.length; i++) { setTimeout((function (i) { return function () { i.style.color = $this.attr("data-icon-color"); } })($icons[i]), delay); delay += $delay; } }, {accY: -100}); } else { $this.each(function () { var $active = $this.attr("data-active"); var $icons = $this.find('i:lt(' + $active + ')'); $icons.css('color', $this.attr("data-icon-color")) }); } }) }) }(jQuery)); |