Пульсирующий вертикальный лоадер
В этой демонстрации мы создадим лоадер — анимированный элемент, который показывается пользователю во время загрузки данных.
Лоадер будет состоять из трёх вертикальных полосок, поочерёдно изменяющих высоту, создавая эффект пульсации.
Для лоадера создадим единственный элемент в HTML-разметке .loader.
Работа с разметкой закончена. Приступим к стилизации. Для начала создадим основу лоадера, укажем размеры.
Далее укажем, чтобы элемент .loader был квадратным. Если понадобиться увеличить размеры, то достаточно будет изменить ширину лоадера.
Нарисуем первую полоску лоадера. Используем для этого одноцветный линейный градиент. Градиенты легко анимируются, и чуть позже вы увидите как.
Чтобы создать сплошной белый градиент, добавляем в него два одинаковых цвета с колорстопами 0% и 100%.
Далее укажем, что фон не должен повторяться.
Задададим расположение фона в левом верхнем углу блока.
Осталось задать размер фона с помощью background-size, чтобы получилась полоса шириной 20% от ширины блока и высотой во весь блок.
Попробуйте удалить no-repeat, чтобы посмотреть, как это повлияет на размеры фона.
Создадим вторую полосу. Для этого полностью скопируем стили первой полосы. Перенесём код второй полосы на новую строку для читабельности.
Важно не потерять запятую между кодом полос.
Сместим полосу левее с помощью background-position. Зададим расположению фона по горизонтали значение 50%. Благодаря этому середина полосы будет совпадать с серединой блока.
Создадим третью полосу по аналогии со второй. Полностью скопируем стили второй полосы и зададим положение фона по горизонтали 100%. Это прижмёт полосу к правому краю блока.
Начнём создавать анимацию, которая будет управлять размерами фона полос.
Для начала создадим ключевые кадры анимации. Для этого воспользуемся директивой @keyframes. Внутри неё создадим два ключевых кадра: 0% и 100%.
В исходном состоянии анимации зададим исходные размеры фона с помощью свойства background-size.
В свойстве background-size через запятую перечислены три значения, каждое относится к своему градиенту.
Добавим последний шаг анимации.
Зададим размеры полосок на последнем шаге анимации: ширина останется неизменой, а высота станет нулевой.
Давайте посмотрим, какая анимация получилась. Для этого добавим в .loader свойство animation со следующими параметрами:
bars — имя созданой анимации;1s — длительность анимации;infinite — бесконечное число проигрываний.linear — линейная скорость проигрывания.
Пока что анимация скучновата. Исправим это.
Для начала изменим вертикальное расположение фона для всех градиентов, чтобы они располагались по центру.
Добьёмся эффекта пульсации полосок. Для этого добавим ещё один шаг анимации на середине, 50%.
Скопируем размеры фона из из шага 0% в шаг 50%.
Теперь изменим высоту второй полоски со 100% до 10% во втором шаге анимации. Средняя полоса начала уменьшаться по высоте намного раньше боковых полос.
Теперь в последнем шаге анимации зададим высоты всех полос 100%. Боковые полосы стали статичными, а средняя полоса начала пульсировать.
Добавим ещё два промежуточных шага, чтобы точнее управлять анимацией. Скопируем в них состояние из первого шага.
Заставим пульсировать первую полоску. Для этого изменим её высоту в шаге 33% по аналогии со второй полоской.
Добавим пульсацию для третьей полосы, изменив её высоту в шаге 66%.
На этом красивый лоадер с анимацией волны готов, демонстрация завершена.
