50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
|
|
(function ($) {
|
|
$.fn.loading = function () {
|
|
var DEFAULTS = {
|
|
backgroundColor: '#b3cef6',
|
|
progressColor: '#4b86db',
|
|
percent: 75,
|
|
duration: 2000
|
|
};
|
|
|
|
$(this).each(function () {
|
|
var $target = $(this);
|
|
|
|
var opts = {
|
|
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
|
|
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
|
|
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
|
|
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
|
|
};
|
|
// console.log(opts);
|
|
|
|
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');
|
|
|
|
$target.find('.background').css('background-color', opts.backgroundColor);
|
|
$target.find('.left').css('background-color', opts.backgroundColor);
|
|
$target.find('.rotate').css('background-color', opts.progressColor);
|
|
$target.find('.right').css('background-color', opts.progressColor);
|
|
|
|
var $rotate = $target.find('.rotate');
|
|
setTimeout(function () {
|
|
$rotate.css({
|
|
'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
|
|
});
|
|
},1);
|
|
|
|
if (opts.percent > 50) {
|
|
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
|
|
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
|
|
$target.find('.right').css({
|
|
animation: animationRight,
|
|
opacity: 1
|
|
});
|
|
$target.find('.left').css({
|
|
animation: animationLeft,
|
|
opacity: 0
|
|
});
|
|
}
|
|
});
|
|
}
|
|
})(jQuery); |