Хаки и Скрипты 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>

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

Можешь почитать и вот эту статейку "Будем менять цвет выделения текста"

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

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