How to make a circle in html + css, which, depending on the time, can be painted over using js?

Question

css

So that for example 15 minutes look like this joxi.ru/GrqzYG1fQvBbGm, half an hour is half a filled circle and so on, intervals of 10 minutes.

Answer 1

I didn’t understand the question, but you can
A already intervals and a way to describe the change in colors, you need to describe it yourself

<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

The link from your question doesn't work. But if I understand correctly, why not use, for example, a gradient? If there are 2 colors, change the percentages in 2 places, and the degree of filling changes:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(to top, red 0%, red 25%, black 25%, black 100%);
}

Based on how you want to change the degree of shading, you can, for example, do this:

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%)";

PS Just now I noticed that you have a comma merged into the link, so it didn't work for me) I saw how you need it. The idea of ​​​​how to implement this manually does not come right away) But, probably, there are ready-made solutions. A circle with 4 fill steps can be made using regular borders, for example:

.circle { 
  border-radius: 50%;
  border: 50px solid transparent;
  border-right-color: black;
  width: 0;
  height: 0;
  transform: rotate(-45deg);
}

But with 6 - the implementation is clearly much more complicated and most likely not without js. If you want it to be in 6 steps, look for ready-made solutions)