Abr@X@bra.ru
Анимированный прелоадер на CSS
Анимированный прелоадер на CSS

Анимированный прелоадер на CSS

10.10.2017
74

В данном посте, хочу рассказать как можно сделать классный прелоадер для сайта на чистом CSS.  

Недавно у меня появилась идея. Я хотел создать прелоадер с анимацией, используя только CSS. И после несколько часов работы вот, что у меня получилось:




Ну как!? Прежде чем вы посмотрите на полученный код в приведенном выше примере, прочитайте данный пост до конца, чтобы узнать о некоторых классных и новых свойствах CSS.

Свойство offset в CSS

Свойство offset в CSS определяется в MDN как:

Сокращенное свойство для анимации элемента по определенному пути.

Это довольно новое и интересное свойство, которое раньше определялось как motion. Но, что именно оно делает? Если вы не знакомы с SVG, я очень советую вам с ним познакомиться в моем маленьком руководстве. Свойство offset состоит из трех отдельных свойств, работающих вместе:
  • offset-path - указывает путь, по которому объект перемещается

  • offset-distance - указывает положение объекта вдоль пути смещения

  • offset-rotate - определяет направление объекта при его позиционировании вдоль пути смещения

В этом примере мы будем использовать только первые два упомянутых свойства.

Как использовать offset-path и offset-distance

Мы знаем, что такое offset-path, но как мы его можем определить? Давайте обратимся с этим вопросом к MDN:

Offset-path – это либо заданный путь с одним или несколькими подпутьями, либо геометрия нестандартной базовой формы. Каждая форма или путь должны определять начальное положение для вычисленного значения «0» для offset-distance и начальное направление, которое указывает вращение объекта в исходное положение.

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

Задаем бесконечный путь направления

Самый простой способ (по крайней мере, для меня) создать бесконечный путь - использовать Adobe Illustrator.

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


После чего, экспортировал все в SVG, тем самым получив координаты пути и размеры:

width: 65px
height: 28px
path coordinates: M23.71 5.21l17.58 17.58a12.43 12.43 0 0 0 17.57 0 12.43 12.43 0 0 0 0-17.57 12.43 12.43 0 0 0-17.57 0L23.71 22.79a12.43 12.43 0 0 1-17.57 0 12.43 12.43 0 0 1 0-17.57 12.43 12.43 0 0 1 17.57-.01z

Исходя из этих данных, мы легко можем применить offset-path к классу CSS:

.selector {
  offset-path: path("M23.71 5.21l17.58 17.58a12.43 12.43 0 0 0 17.57 0 12.43 12.43 0 0 0 0-17.57 12.43 12.43 0 0 0-17.57 0L23.71 22.79a12.43 12.43 0 0 1-17.57 0 12.43 12.43 0 0 1 0-17.57 12.43 12.43 0 0 1 17.57-.01z");
}

Применение стилей и анимаций к нашему элементу

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

<span class="loader"></span>

Основываясь на наших данных, мы можем инициализировать наш загрузчик в CSS:

.loader {
  position: relative;
  display: block;
  width: 65px;
  height: 28px;
}

Теперь, когда наш прямоугольник определен, давайте создадим две точки. Идея здесь состоит в том, что точки будут преследовать друг друга по пути символа бесконечности. Я буду использовать псевдо-элементы CSS :: before и :: after:

.loader::before,
.loader::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #FFEB3B;
  border-radius: 50%;
  content: "";
}

Теперь давайте разместим наши точки вдоль пути, применив свойство offset-path:

.loader::before,
.loader::after {
  offset-path: path("M23.71 5.21l17.58 17.58a12.43 12.43 0 0 0 17.57 0 12.43 12.43 0 0 0 0-17.57 12.43 12.43 0 0 0-17.57 0L23.71 22.79a12.43 12.43 0 0 1-17.57 0 12.43 12.43 0 0 1 0-17.57 12.43 12.43 0 0 1 17.57-.01z");
}

Затем, нам нужно определить ключевые кадры анимации. Нам нужно оживить точки вдоль пути, поэтому мы начнем со смещения от 0% и переместимся до 100%:

@keyframes loader {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

Теперь давайте применим анимацию к нашим псевдоэлементам. Я использую cubic bezier ease-in-out функцию:

.loader::before,
.loader::after {
  animation: loader 1500ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

Отлично, анимация работает! Но две точки выглядят как одна. Отложим движение второй точки:
.loader::after {
  animation-delay: 100ms;
}

И вуаля! Вот конечный результат:


Поддержка offset

Это новое свойство, поэтому поддержка довольно слабая. Chrome поддерживает его, но более старые версии Chrome используют motion. «Рассматривается» для Edge и Firefox. Я рекомендую его использовать совместно с @supports, чтобы обеспечить корректную работу.

Заключение

Сегодня мы рассмотрели новое свойство CSS offset, связали его с анимацией CSS и сделали что-то классное. Возможности CSS продолжают расти, поэтому я призываю вас использовать его. Спасибо, что читаете мой блог, и если у вас есть вопросы, комментарии или отзывы, не стесняйтесь оставляйте их в комментариях или пишите мне в VK.




CSS, SVG, Анимация
Читайте также:
Использование SVG на вашем сайте

Использование SVG на вашем сайте

Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изоб...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать