63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
|
/*
|
||
|
|
jQuery-Circle-Plugin v0.1 by Jamal hassouni
|
||
|
|
https://github.com/jamalhassouni
|
||
|
|
*/
|
||
|
|
(function ($) {
|
||
|
|
|
||
|
|
// circle animation pluqins by jamal hassouni
|
||
|
|
$.fn.circlos = function () {
|
||
|
|
// deafualt options
|
||
|
|
var DEFAULTS = {
|
||
|
|
backgroundColor: '#b3cef6', // default background color
|
||
|
|
progressColor: '#4b86db', // default progress color
|
||
|
|
percent: 75, // default percent value
|
||
|
|
duration: 2000 // default duration value
|
||
|
|
};
|
||
|
|
|
||
|
|
$(this).each(function () {
|
||
|
|
var $target = $(this);
|
||
|
|
// options of circle
|
||
|
|
var options = {
|
||
|
|
// if isset value of background if not use the default value of background color
|
||
|
|
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
|
||
|
|
// if isset value of progress if not use the default value of progress color
|
||
|
|
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
|
||
|
|
// if isset value of percent if not use the default value of percent
|
||
|
|
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
|
||
|
|
// if isset value of duration if not use the default value of duration
|
||
|
|
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
|
||
|
|
};
|
||
|
|
console.log(options);
|
||
|
|
// add divs for structure
|
||
|
|
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + options.percent + '%</span></div>');
|
||
|
|
// change style of the circle with the options values
|
||
|
|
$target.find('.background').css('background-color', options.backgroundColor);
|
||
|
|
$target.find('.left').css('background-color', options.backgroundColor);
|
||
|
|
$target.find('.rotate').css('background-color', options.progressColor);
|
||
|
|
$target.find('.right').css('background-color', options.progressColor);
|
||
|
|
|
||
|
|
var $rotate = $target.find('.rotate');
|
||
|
|
setTimeout(function () {
|
||
|
|
$rotate.css({
|
||
|
|
'transition': 'transform ' + options.duration + 'ms linear',
|
||
|
|
'transform': 'rotate(' + options.percent * 3.6 + 'deg)'
|
||
|
|
});
|
||
|
|
},1);
|
||
|
|
|
||
|
|
if (options.percent > 50) {
|
||
|
|
// add animation for the right class and left class
|
||
|
|
var animationRight = 'toggle ' + (options.duration / options.percent * 50) + 'ms step-end';
|
||
|
|
var animationLeft = 'toggle ' + (options.duration / options.percent * 50) + 'ms step-start';
|
||
|
|
$target.find('.right').css({
|
||
|
|
animation: animationRight,
|
||
|
|
opacity: 1
|
||
|
|
});
|
||
|
|
$target.find('.left').css({
|
||
|
|
animation: animationLeft,
|
||
|
|
opacity: 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})(jQuery);
|