/*!
* https://github.com/umarwebdeveloper/jquery-css-skills-bar
* Author: @umarwebdeveloper
* Licensed under the MIT license
*/
(function ( $ ) {
$.fn.skillBars = function( options ) {
var settings = $.extend({
from: 0, // number start
to: false, // number end
speed: 1000, // how long it should take to count between the target numbers
interval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
/*onComplete: function(from) {
console.debug(this);
}*/
classes:{
skillBarBar : '.skillbar-bar',
skillBarPercent : '.skill-bar-percent',
}
}, options );
return this.each(function(){
var obj = $(this),
to = (settings.to != false) ? settings.to : parseInt(obj.attr('data-percent'));
if(to > 100){
to = 100;
};
var from = settings.from,
loops = Math.ceil(settings.speed / settings.interval),
increment = (to - from) / loops,
loopCount = 0,
interval = setInterval(updateValue, settings.interval);
obj.find(settings.classes.skillBarBar).animate({
width: parseInt(obj.attr('data-percent'))+'%'
}, settings.speed);
function updateValue(){
from += increment;
loopCount++;
$(obj).find(settings.classes.skillBarPercent).text(from.toFixed(settings.decimals)+'%');
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(obj, from);
}
if (loopCount >= loops) {
clearInterval(interval);
from = to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(obj, from);
}
}
}
});
};
}( jQuery ));