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

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

Пример индикатора загрузки Демонстрация для сайта | RUDEBOX

Шаг 1. HTML

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

Теперь перейдем к следующему шагу.

Пример индикатора загрузки Демонстрация для сайта | RUDEBOX

Шаг 2. CSS

Со стилями все интереснее, нам необходимо определить параметры вращения, мы установим относительное вращение по осям:

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

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