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ий полукруг с цветом заполняющей полоски остается на месте, левую часть фонового круга

Pie Timer на CSS и HTML: 2 комментария

  1. Pie charts, even in their simplest two-color form, have traditionally been anything but simple to create with web technologies, despite being incredibly common for information ranging from simple stats to progress indicators and timers. Implementations usually involved either using an external image editor to create multiple images for multiple values of the pie chart, or large JavaScript frameworks designed for much more complex charts.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *