Как на html+css сделать окружность, которую в зависимости от времени можно закрашивать используя js?

Question

[dranets13]

Чтобы например 15 минут выглядели так joxi.ru/GrqzYG1fQvBbGm, полчаса - это половина закрашенной окружности и так далее, интервалы по 10 минут.

Comments

[Andrew]

времени чего? Текущего, на компе? Или таймера нахождения на странице?

[dranets13]

Andrew, из базы просто будет дергаться время 10, 20, 30, 40, 50, 60 минут и в зависимости от этого закрашенный элемент выводиться на странице. Т.е. динамически изменять ничего не надо, единожды при загрузке страницы прорисовать

[Andrew]

dranets13, 6 if'ov с разными картинками, не вариант? :)

[dranets13]

хочется изящнее, чтобы лишнюю графику не тянуть

[Andrey Tsvetkov]

#element_id {
    width: 100px;
    height: 100px;
    background-color: #ff5400;
    border: 50%;
}

Answer 1

[Даниил]

Не понял вопрос, но можно
А уже интервалы и способ описания изменения цветов, нужно самому описать

<div id="circle" style="width:100px; height:100px; border-radius:50px; background-color:RGB(255,0,0)"></div>
<script>
(function(){
       var div=document.getElementById("circle");
       var lastR=255;
        var lastG=0;
       var lastB =0;
       setInterval(()=>{
               div.style.backgroundColor="RGB("+lastR+","+lastG+","+lastB+")";
               if(lastG<255)
               	lastG++;
               else
               	lastG=0;
               if(lastG<255){
               	lastB++;
               }
               else 
               	lastB=0; 
           },100);
   })();
</script>

Answer 2

[Evgeny Zaharov]

Ссылка из вашего вопроса не работает. Но если я правильно понял, почему не использовать, например, градиент? Если 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 ступеней, ищите готовые решения)