Ссылка из вашего вопроса не работает. Но если я правильно понял, почему не использовать, например, градиент? Если 2 цвета, меняете в 2-х местах проценты, и меняется степень заливки:
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to top, red 0%, red 25%, black 25%, black 100%);
}
Исходя из того, как вы хотите менять степень закрашенности, можно, например, сделать так:
var progress = 10; // допустим, это прошедшие минуты, полученные из бд
var percent = Math.round(progress/60 * 100); // минуты в процентах от часа
var circle = document.getElementsByClassName('circle')[0]; // собственно, наш круг
circle.style.backgroundImage = "linear-gradient(to top, red 0%, red " + percent + "%, black " + percent + "%, black 100%)";
P.S. Только сейчас заметил, что у вас запятая влилась в ссылку, поэтому у меня она не работала) Увидел как вам надо. Сразу не приходит идея как реализовать это ручками) Но, вероятно, есть готовые решения. Окружность с 4 ступенями заливки можно сделать с помощью обычных border'ов, так, например:
.circle {
border-radius: 50%;
border: 50px solid transparent;
border-right-color: black;
width: 0;
height: 0;
transform: rotate(-45deg);
}
Но с 6 - реализация явно намного сложнее и, скорее всего, не без js. Если хотите чтобы было в 6 ступеней, ищите готовые решения)
