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

Кроме этого одним из преимуществ индикатора является его малый вес, что позволяет моментально загружать страницу с процессом. И так, давайте приступим.

Шаг 1. HTML

Для начала мы создаем разметку. В ней нет ничего особенного:

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

Интерактивная загрузка для сайта с помощью JS RUDEBOX_mini_mini

Шаг 2. CSS

Со стилями также, мы определим общие параметры, создаем фон, добавим разрешение загрузчика и установим параметры для отображаемого текста:

Шаг 3. JS

Здесь все достаточно интересно, так как основную часть работы будет выполнять именно JS, у нас будут круги, которые будут появляться и постепенно раскрашиваться в цветовые оттенки. Кроме этого установим траекторию полета и формирования фигуры для частиц:

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

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

Читайте также: