• 2134
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

В демо приведено уже довольно много симпатичных вариантов лоадеров, но с помощью javascript файла sonic (размером около 3 Кб в сжатом состоянии) можно создать и собственные анимации загрузки.

Скачать исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. и залить скрипт в корень вашего сайта
Вариант1

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{
width: 100,
height: 50,
padding: 10,

stepsPerFrame: 2,
trailLength: 1,
pointDistance: .03,

strokeColor: '#FF7B24',

step: 'fader',

multiplier: 2,

setup: function() {
this._.lineWidth = 5;
},

path: [

['arc', 10, 10, 10, -270, -90],
['bezier', 10, 0, 40, 20, 20, 0, 30, 20],
['arc', 40, 10, 10, 90, -90],
['bezier', 40, 0, 10, 20, 30, 0, 20, 20]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант2

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 30,
height: 30,

stepsPerFrame: 2,
trailLength: .3,
pointDistance: .1,
padding: 10,

fillColor: '#D4FF00',
strokeColor: '#FFF',

setup: function() {
this._.lineWidth = 20;
},

path: [
['line', 0, 0, 30, 0],
['line', 30, 0, 30, 30],
['line', 30, 30, 0, 30],
['line', 0, 30, 0, 0]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант3

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 100,

stepsPerFrame: 1,
trailLength: 1,
pointDistance: .025,

strokeColor: '#05E2FF',

fps: 20,

setup: function() {
this._.lineWidth = 2;
},
step: function(point, index) {

var cx = this.padding + 50,
cy = this.padding + 50,
_ = this._,
angle = (Math.PI/180) * (point.progress * 360);

this._.globalAlpha = Math.max(.5, this.alpha);

_.beginPath();
_.moveTo(point.x, point.y);
_.lineTo(
(Math.cos(angle) * 35) + cx,
(Math.sin(angle) * 35) + cy
);
_.closePath();
_.stroke();

_.beginPath();
_.moveTo(
(Math.cos(-angle) * 32) + cx,
(Math.sin(-angle) * 32) + cy
);
_.lineTo(
(Math.cos(-angle) * 27) + cx,
(Math.sin(-angle) * 27) + cy
);
_.closePath();
_.stroke();

},
path: [
['arc', 50, 50, 40, 0, 360]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант4

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 50,

stepsPerFrame: 1,
trailLength: 1,
pointDistance: .1,
fps: 15,
padding: 10,
//step: 'fader',

fillColor: '#FF2E82',

setup: function() {
this._.lineWidth = 20;
},

path: [
['line', 0, 20, 100, 20],
['line', 100, 20, 0, 20]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант5

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 100,

stepsPerFrame: 7,
trailLength: .7,
pointDistance: .01,
fps: 30,

setup: function() {
this._.lineWidth = 10;
},

path: [
['line', 20, 70, 50, 20],
['line', 50, 20, 80, 70],
['line', 80, 70, 20, 70]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант6

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 100,

stepsPerFrame: 4,
trailLength: 1,
pointDistance: .01,
fps: 25,

fillColor: '#FF7B24',

setup: function() {
this._.lineWidth = 10;
},

step: function(point, i, f) {

var progress = point.progress,
degAngle = 360 * progress,
angle = Math.PI/180 * degAngle,
angleB = Math.PI/180 * (degAngle - 180),
size = i*5;

this._.fillRect(
Math.cos(angle) * 25 + (50-size/2),
Math.sin(angle) * 15 + (50-size/2),
size,
size
);

this._.fillStyle = '#63D3FF';

this._.fillRect(
Math.cos(angleB) * 15 + (50-size/2),
Math.sin(angleB) * 25 + (50-size/2),
size,
size
);

if (point.progress == 1) {

this._.globalAlpha = f < .5 ? 1-f : f;

this._.fillStyle = '#EEE';

this._.beginPath();
this._.arc(50, 50, 5, 0, 360, 0);
this._.closePath();
this._.fill();

}

},

path: [
['line', 40, 10, 60, 90]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>

Вариант7

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 100,

stepsPerFrame: 3,
trailLength: 1,
pointDistance: .01,
fps: 30,
step: 'fader',

strokeColor: '#D4FF00',

setup: function() {
this._.lineWidth = 6;
},

path: [
['arc', 50, 50, 20, 360, 0]
]
},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант8

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 100,

stepsPerFrame: 1,
trailLength: 1,
pointDistance: .02,
fps: 30,

fillColor: '#05E2FF',

step: function(point, index) {

this._.beginPath();
this._.moveTo(point.x, point.y);
this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);
this._.closePath();
this._.fill();

},

path: [
['arc', 50, 50, 30, 0, 360]
]

},
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант9

Код:
<script src="sonic.js"></script>
<script>
var loaders = [
{

width: 100,
height: 100,

stepsPerFrame: 1,
trailLength: 1,
pointDistance: .05,

strokeColor: '#FF2E82',

fps: 20,

setup: function() {
this._.lineWidth = 4;
},
step: function(point, index) {

var cx = this.padding + 50,
cy = this.padding + 50,
_ = this._,
angle = (Math.PI/180) * (point.progress * 360),
innerRadius = index === 1 ? 10 : 25;

_.beginPath();
_.moveTo(point.x, point.y);
_.lineTo(
(Math.cos(angle) * innerRadius) + cx,
(Math.sin(angle) * innerRadius) + cy
);
_.closePath();
_.stroke();

},
path: [
['arc', 50, 50, 40, 0, 360]
]
}
];

var d, a, container = document.getElementById('in');

for (var i = -1, l = loaders.length; ++i < l;) {

d = document.createElement('div');
d.className = 'l';

a = new Sonic(loaders[i]);

d.appendChild(a.canvas);
container.appendChild(d);

a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';
a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';

a.play();

}

</script>
Вариант10

Код:
<script src="sonic.js"></script>
<script>

var circle = new Sonic({

width: 50,
height: 50,
padding: 50,

strokeColor: '#000',

pointDistance: .01,
stepsPerFrame: 3,
trailLength: .7,

step: 'fader',

setup: function() {
this._.lineWidth = 5;
},

path: [
['arc', 25, 25, 25, 0, 360]
]

});

circle.play();

document.body.appendChild(circle.canvas);

</script>
Вариант11

Код:
<script src="sonic.js"></script>
<script>

var square = new Sonic({
width: 100,
height: 100,
fillColor: '#000',
path: [
['line', 10, 10, 90, 10],
['line', 90, 10, 90, 90],
['line', 90, 90, 10, 90],
['line', 10, 90, 10, 10]
]
});

square.play();

document.body.appendChild(square.canvas);

</script>
Вариант12
)
Код:
<script src="sonic.js"></script>
<script>

var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

var square = new Sonic({

width: 100,
height: 100,

pointDistance: .005,
trailLength: .9,
stepsPerFrame: 5,

setup: function() {
this._.lineWidth = 5;
},

step: function(point, index, frame) {

this._.beginPath();

var color, prev, x, y, angle,
radius = 45,
cx = 50,
cy = 50;

angle = Math.PI/180 * (point.progress * 360);

for (var i = -1, l = colors.length; ++i < l;) {

color = colors[i];
prev = this['_' + color];

x = Math.cos(angle) * radius + cx;
y = Math.sin(angle) * radius + cy;

this._.fillStyle = color;
this._.strokeStyle = color;

this._.beginPath();
prev && this._.moveTo(prev.x, prev.y);
this._.lineTo(x, y);
this._.closePath();
this._.stroke();
this['_' + color] = {x:x,y:y};

radius -= 5;

}

},

path: [
['arc', 100, 100, 90, 0, 360]
]

});

square.play();

document.body.appendChild(square.canvas);

</script>
Также можно самим определить шаг функции.Вроде все смотрим демо ,качаем исходник ,если непонятно пишем.

Можешь почитать и вот эту статейку "Автозаполнение с HTML5 datalist"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какие темы вам интереснее?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element