Концепция анимированных круговых лоадеров на SVG достаточно проста: берём две окружности, одну для фона, вторую для отображение прогресса, и анимируем значение атрибута stroke-dashoffset.
И вот этот самый сдвиг задаётся в рамках некого stroke-dasharray: массива точек (кривых, dash), которыми рисуется кривая.
С ним можно много забавного делать, но это потом.
Вот только есть проблема: все кривые у нас разной длины. И браузер рассчитывает её на основе плотности экрана и параметров кривой. И выходит, значение нужно сначала высчитать:
const circle = document.querySelector('.spinner__circle');
console.log(circle.getTotalLength());
И я так постоянно делал. Ну, как, постоянно: лоадер как правило делается один раз на проект 🙂
Каково же было моё удивление, когда я обнаружил, что относительную длину кривой можно задать заранее! И не страдать ерундой с расчётом:
pathLength="100"
stroke-dasharray="100"
stroke-dashoffset="0"
И за это отвечает именно атрибут pathLength. Дальше же для простоты работы определяем dasharray и dashoffset круглыми значениями.
Ну и демо, конечно: https://codepen.io/alinaki/pen/oNXjEzz
Теперь, внимание, вопрос: почему часть атрибутов записывается через дефис, в kebab-case, а часть — в camelCase?
#svg #length #loader