Создаём loading image средствами Javascript.
Демо на jsfiddle
<body></body>
<script>
(function () {
"use strict";
function _circle(top, left, size) {
var circle = document.createElement("DIV");
circle.style = "width: " + size + "px; height: " + size + "px; border-radius: " + (size * 10) + "px; position: fixed;" +
"background-color: #000000; top: " + top + "px; left: " + left + "px";
document.body.appendChild(circle);
return circle;
}
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 ) {
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";
}
}
function _init(settings) {
settings = _default(settings, {
top : 100,
left : 100,
size : 10,
speed : 200,
circles : 8,
dispersion : 2,
by : 5
});
var circles = [];
var j = 0;
for (var i = 0; i < settings.circles; i++) {
circles.push(_circle( settings.top + Math.sin(i / settings.circles * 6.28) * settings.size * settings.dispersion,
settings.left + Math.cos(i / settings.circles * 6.28) * settings.size * settings.dispersion,
settings.size
));
}
var timer = setInterval(function () {
++j;
_fx( circles[j % settings.circles], settings.size, settings.size + settings.by, settings.speed );
_fx( circles[(j - 1) % settings.circles], settings.size + settings.by, settings.size, settings.speed );
}, settings.speed);
return {
remove : function () {
for (var i = 0; i < circles.length; i++) {
document.body.removeChild(circles[i]);
}
clearInterval(timer);
}
};
}
window.LoadingImage = _init;
})();
LoadingImage({ top : 50, left : 50 });
</script>
Функция возвращает метод remove(), который удаляет все кружки и интервал анимации.
Также она принимает параметры (в скобках указаны параметры по умолчанию):
|
Код:
|
top, left (100, 100) - координаты куда вставлять
size (10) - размер кружков
speed (200) - скорость анимации
circles (8) - количество кружков
dispersion (2) - разброс
Например, если захочется сделать 16 кружков вместо 8, то dispersion лучше поставить 4, иначе кружки будут накладываться друг на друга. Чем больше dispersion, тем больше конечный loading image
by (5) - на сколько увеличивать кружок |