CSS-функции sin() и cos() позиционируют круглые наконечники прогресс-бара с точностью до пикселя. Собираем с нуля — формулы, переменные, анимация. Демонстрация в Телеграме → https://t.me/cssbol/52 Вторая часть серии про круговой прогресс-бар на чистом CSS. В первой хватило двух градиентов — в этой добавляем закруглённые концы шкалы, и для этого понадобилась тригонометрия. В ролике: – устройство прогресс-бара через conic-gradient и radial-gradient, – как через --scale-radius и --scale-thickness управлять радиусом и толщиной шкалы, – зачем CSS нужны sin() и cos() — и формулы позиционирования по окружности, – синхронизация четырёх градиентов через общие переменные, – сглаживание зубцов — трюк с разведением color-stop на 1px, – анимация прогресса, радиуса и толщины одновременно. В итоге — полностью кастомизируемый прогресс-бар на чистом CSS, без SVG и JavaScript. Таймкоды: 00:00 Круговой прогресс-бар на CSS 01:20 CSS-переменные для кастомизации 02:48 Формулы радиуса и толщины шкалы 04:57 sin() и cos() для круглых наконечников 06:48 Позиционирование по окружности 10:12 Второй наконечник и синхронизация градиентов 11:40 Тестирование и сглаживание зубцов 14:50 Анимация прогресса и результат Ссылки: – Часть 1: круговой прогресс-бар — простая реализация → https://www.youtube.com/watch?v=NE7rRZJssO8 – Рейтинг качества фронтенд-разработки → https://frontendrating.ru – Чемпионат по вёрстке #3 → https://htmlacademy.ru/contest/3/professional-track – Канал в Телеграме → https://t.me/cssbol Подписывайтесь на канал, чтобы не пропустить новые выпуски CSS Боли! #css #frontend #webdev #webdevelopment #frontenddev #htmlacademy #progressbar #верстка