Круговой прогресс бар на CSS

В одном из недавних сайтов, который я создал, мне довелось сделать интересный визуальный элемент. Заказчик сайта хотел, чтобы все внешние ссылки на сайте вели на буферную страницу, которая бы предупреждала пользователей, что они собираются выйти с сайта, и через несколько секунд происходил переход по этой ссылке. Ничего сложного, но надо было как-то визуально представить таймер до момента редиректа и сделать какой-нибудь индикатор течения времени, желательно только на CSS.

Я решил сделать этот индикатор в виде кругового прогресс бара. Думаю, это лучший вариант изображения течения времени, потому что есть схожесть с часами. Я сделал его в виде закрашенного круга или диска, который постепенно исчезает под растущим сегментом по часовой стрелке начиная с «двенадцати часов».

Оказалось, чтобы создать такой круговой прогресс бар нужно всего парочка дивов и пара десятков строк стилей CSS, даже с учетом анимации.

HTML

<div id="pie-progress-bar">
  <div class="-segment"></div>
</div>

CSS

#pie-progress-bar {
  overflow: hidden;
  position: relative;
  margin: 50px auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #1489be
}
#pie-progress-bar .-segment {   
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  animation: 3.8s step-end 0.1s segment forwards;
}
#pie-progress-bar .-segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left;
  animation: 3.8s linear 0.1s segment-before forwards;
}
@keyframes segment {
  0% {
    overflow: hidden;
  }
  50% {
    overflow: visible;
    background: #fff;
  }
  100% {
    overflow: visible;
    background: #fff;
  }
}
@keyframes segment-before {
  0% {
     transform: rotate(-180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

Чтобы изменить размер кругового прогресс бара нужно всего лишь изменить значения для двух свойств контейнера #pie-progress-bar. А именно, width и height все остальное подстроится под новые размеры. То же самое относится к цвету.