Хаки и Скрипты Next Generation CMS

Красивые лоадеры использующие HTML5 canvas.

irbees2008 irbees2008 Опубликовано - 6 - февраля Разное
2647 - 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>
Также можно самим определить шаг функции.Вроде все смотрим демо ,качаем исходник ,если непонятно пишем.

Можешь почитать и вот эту статейку "НУ не знаю...."

Опрос

Ваше мнение

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

Последние комментарии

Теги

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

Статистика

  • Caйту: 3459 дней
  • Новостей: 553
  • Комменты: 254
  • Зарегистрированно : 583
  • Онлайн всего: [1]
  • Гости: [1]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.845сек
  • Потребление памяти: 5.177 Mb 
  •   яндекс.ћетрика