#фишка дня

Концепция анимированных круговых лоадеров на 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