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

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

Шаг 1. HTML

Разметка достаточно проста, она будет состоять с одного класса с параметром «hoja», также мы добавляем текст, который будет отображаться в центре индикатора, в данном случае это название нашего сайта:

Кроме этого мы добавляем библиотеки скриптов и стили, просмотреть их можно в исходниках.

Индикатор загрузки страницы для вашего сайта | RUDEBOX

Шаг 2. CSS

Здесь все достаточно интереснее, для индикатора необходимо установить абсолютное позиционирование, и выставить по центру, для этого будем использовать top: 50%;  left: 50%;. Далее мы установим окрас колец и анимацию кругового вращения, по умолчанию будет установлено 2s.

Кроме этого, при вращении нам необходимо сделать дисбаланс вращения, для этого установим траекторию вращения, соответственно 0, 180 и 360 и отрицательное значение с минусовым значением.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.