Главная страница » Веб-дизайн » Индикаторы загрузки сайта с помощью HTML5

Индикаторы загрузки сайта с помощью HTML5

Создавая сайт необходимо помнить о всем мелочах, ведь именно они бросаются в глаза первыми, как бы это странно не звучало. Именно маленькая деталь может стать залогом успеха или ее отсутствие обернется вам полным провалом. В сегодняшнем уроке речь пойдет о создании индикатора загрузки, или как их еще называют индикатор прогрузки. Если вы используете медленный интернет, то соответственно и элементы на странице загружаются медленно. Если вы разработчик, то вы можете скрасить загрузку элементов на вашем сайте с помощью красивого индикатора.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В данном уроке мы рассмотрим как создать замечательные индикаторы загрузки страницы исключительно с помощью html5. Это весьма практично, ведь индикаторы не используют изображений, и загружаются мгновенно. Давайте приступим.

Анимированное вертикальное меню с помощью CSS3 RUDEBOX

Мы будем использовать HTML5 <canvas> элемент / API. Он работает, опираясь на форму (по умолчанию 6px квадрат), который помещен в крошечное интервалы времени вдоль заданного пути. Вы можете определить путь с помощью функции: дуги или линии. Мы определим простую линию.

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);

Еще один шаг это функция, которая составляет наши квадраты в элементы которые будут вращаться вдоль заданной траектории. Это сочетание компонентов работает очень хорошо:

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);

Вы можете определить свою траекторию для вращения. В демонстрации мы рассмотрели 9 различных примеров. Как организованная каждая структура можно просмотреть в исходниках.