Хаки и Скрипты Next Generation CMS : Разное, HTML5, JS : Красивые лоадеры использующие HTML5 canvas.

irbees2008 Опубликовано - 6 - февраля Разное

Адаптировал: 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>

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

Можешь почитать и вот эту статейку "Чашка чая на CSS3"

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

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