Немного дописал код, главные изменения - теперь размер кружков меняется по цепочке (см. демо, параметр chain), а также можно менять opacity (параметр fade). Если fade больше нуля, у активных кружков opacity будет увеличиваться, если меньше нуля - то соответственно уменьшаться, в пример всё видно. Чтобы opacity не менялся вообще, fade следует поставить на 1.
<body></body>
<script>
(function () {
"use strict";
function _default(settings, defaultProps) {
if (!settings) settings = {};
for (var i in defaultProps) if ( !(i in settings) ) settings[i] = defaultProps[i];
return settings;
}
function _fx(circle, from, to, speed, opacityFrom, opacityTo ) {
var start = +new Date();
fx();
function fx() {
var m = (+new Date() - start) / speed;
if (m > 1) m = 1; else setTimeout(fx, 17);
circle.style.width = circle.style.height = (from + (to - from) * m) + "px";
if (opacityFrom) circle.style.opacity = opacityFrom + (opacityTo - opacityFrom) * m;
}
}
function _init(settings) {
settings = _default(settings, {
top : 100,
left : 100,
size : 10,
speed : 200,
circles : 8,
dispersion : 2,
by : 5,
color : "#000000",
chain : 1,
fade : -0.5
});
var reverse = false;
if (settings.fade < 0) {
settings.fade = -settings.fade;
reverse = true;
}
var x4 = reverse ? 1 : settings.fade;
var x3 = reverse ? -1 : 1;
var x2 = settings.size * settings.dispersion;
var x1 = 2 * x2 + settings.size - 1;
var circles = [];
var wrap = document.createElement("DIV");
wrap.style.cssText = "position: absolute; top: " + (settings.top - x2) + "px; left: " +
(settings.left - x2) + "px; width: " + x1 + "px; height:" + x1 + "px" ;
var j = -1;
for (var i = 0; i < settings.circles; i++) {
var circle = document.createElement("DIV");
circle.style.cssText = "width: " + settings.size + "px; height: " + settings.size + "px; position: fixed;" +
"background-color: " + settings.color + "; border-radius: " + (settings.size + settings.by) +
"px; top: " + (settings.top + Math.sin(i / settings.circles * 6.28) * x2) + "px; left: " +
(settings.left + Math.cos(i / settings.circles * 6.28) * x2) + "px; opacity: " +
(reverse ? 1 : settings.fade);
wrap.appendChild(circle);
circles.push(circle);
}
document.body.appendChild(wrap);
var timer = setInterval(function () {
++j;
_fx(
circles[j % settings.circles],
settings.size,
settings.size + settings.by,
settings.speed,
x4,
reverse ? settings.fade : 1 );
for (var i = 1; i <= settings.chain; i++) {
if ((j - i) % settings.circles < 0) continue;
_fx(
circles[(j - i) % settings.circles],
settings.size + settings.by * (settings.chain - i + 1) / settings.chain,
settings.size + settings.by * (settings.chain - i) / settings.chain,
settings.speed,
x4 + x3 * (1 - settings.fade) * (settings.chain - i + 1) / settings.chain,
x4 + x3 * (1 - settings.fade) * (settings.chain - i) / settings.chain
);
}
}, settings.speed);
return {
remove : function () {
document.body.removeChild(wrap);
clearInterval(timer);
},
image : wrap
};
}
window.LoadingImage = _init;
})();
LoadingImage({ top : 50, left : 50, speed : 100, by : 10, color : "#007fff", size : 20, chain : 5, fade: -0.5 });
LoadingImage({ top : 50, left : 200, speed : 100, by : 10, color : "#007fff", size : 20, chain : 5, fade: 0.5 });
LoadingImage({ top: 50, left : 350, speed : 100, by : 8, color : "#007fff", size : 10, chain : 10, fade: 1, circles : 16, dispersion : 4 });
</script>