CSS 360 rotating progress radial using JS

Answer 1

Here is an idea based on this previous answer where you can do this with only background:

var ele = document.getElementById("box");
var deg = -90;
var s = 1;
var myInterval = setInterval(function() {
  if(deg >= 90 && s) {
    ele.style.setProperty("--s", --s);
    deg = -90;
  }
  deg = deg + 10;
  ele.style.setProperty("--v", deg+'deg');
  
  if(deg >= 90 && !s) {
    clearInterval(myInterval);
  }
}, 500);

#box {
  width:100px;
  height:100px;
  border-radius:50%;
  background:
    linear-gradient(var(--v), green 50%,transparent 0) center/calc(var(--s)*100%),
    linear-gradient(var(--v), red 50%,  transparent 0) center/calc(100% - var(--s)*100%),
    linear-gradient(to right, green 50%,red 0);
}

Shortly this will be something trivial with conic-gradient():

var ele = document.getElementById("box");
var deg = 0;
var myInterval = setInterval(function() {
  deg = deg + 10;
  ele.style.setProperty("--v", deg+'deg');
  
  if(deg >= 360 ) {
    clearInterval(myInterval);
  }
}, 500);

#box {
  width:100px;
  height:100px;
  border-radius:50%;
  background:
    conic-gradient(red var(--v,0deg),green var(--v,0deg),green 360deg);
}

The above should work only on Chrome