Круговий прогрес бар на 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 все інше підлаштовується під нові розміри. Те саме відноситься до кольору.