Pie Timer на CSS и HTML
В работе возникла необходимость реализовать «пирожок-таймер». И так как на дворе 2018 год, то сделать это решил без использования JavaScript.
Дабы избежать написания велосипеда, был произведен поиск с соответсвующим запросом и найдена следующая реализация таймера: https://css-tricks.com/css-pie-timer/ , которая выплыла в поиске на 2х страницах подряд. Такая реализация мне не подошла, т.к. в ней используется прямоугольная маска, которую видно на не однородном фоне.
И так вот моя реализация:
See the Pen Pie Timer by Arnold (@imarny) on CodePen.
В здесь используется полный фоновый круг и 3 полукруга:
- фоновый круг создает полукруг не заполненной части слева
- 1ый полукруг фонового цвета созадает первую половину анимации, открывая 2ой полукруг
- 2ой полукруг с цветом заполняющей полоски создает 2ую часть анимации, закрывая 1ый полукруг
- 3ий полукруг с цветом заполняющей полоски остается на месте, левую часть фонового круга
Рубрики: Русский, Статьи в блоге