Объемный индикатор загрузки для сайта на CSS3Иногда возникает необходимость сделать индикатор загрузки, это необходимо, чтобы подать пользователю всю информацию сразу, а не частично, пока страница загружается. Такой прием часто используется на «тяжелых» сайтах, уведомляя посетителя, что сайт загружается с помощью индикатора. В сегодняшнем уроке мы рассмотрим как создать один из таких индикаторов. Чтобы страницу не загружать еще больше, данный индикатор будет создан с помощью правил css3. Это позволит существенно сократить вес индикатора и увеличить скорость загрузки.

 

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

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

Шаг 1. HTML

Разметка будет простой, у нас будет два класса «preloader» и «preloader-box» первый из который будет определять общие правила, а второй определяет полностью разметку.

Чтобы добавить новые буквы, Вам необходимо просто добавить новые блоки <div></div> с включенными в них желаемой буквой. Каждый блок, это отдельный квадрат.

Объемный индикатор загрузки для сайта на CSS3_mini

Шаг 2. CSS

Теперь нас необходим все параметры, с помощью которых у нас будет работать анимация, и так, для начала нам необходимо определить общие параметры позиционирования:

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

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

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