Всем доброго дня.
Разбираю анимацию лоадера с сайта 60.belangersalach.ca.
Анимация довольно простая, основой которой является работа с svg.
Для более глубокого изучения "рисования svg" рекомендую прочесть статью на css-tricks.
Здесь же объясню простым языком.
strokeDasharray and strokeDashoffset
Чтобы анимировать svg нам нужно знать два параметра:
1. strokeDasharray - расстояние между штрихами svg объекта.
2. strokeDashoffset - смещение начальной точки отрисованного объекта.
В данной анимации нам нужно определить strokeDashoffset и плавно анимировать полученное значение в 0.
Для определения strokeDashoffset нам поможет скрипт:
SVG
Теперь давайте разберёмся, что такое svg и path.
Элемент svg является контейнером, который определяет новую систему координат и область просмотра.
Элемент <path> является общим элементом для описания фигуры.
Если обратиться к спецификации, то станет ещё более понятно.
Path описывается с использованием понятия текущей точки. По аналогии с рисованием на бумаге текущую точку можно рассматривать как местоположение ручки. Положение пера можно изменить, а контур фигуры (открытой или закрытой) можно обвести, перетаскивая перо по прямым или кривым линиям.
Наш svg содержит несколько path, но нас интересует именно тот, который отвечает за отрисовку красной линии, в данном случае это последний path.
Находим его, присваиваем ему идентификатор и по вышеупомянутому скрипту находим strokeDashoffset.
Осталось дело за малым. Напишем простую анимацию на css и готово.
Результат
