javascript - CSS 360 rotating progress radial using JS

Question

var ele = document.getElementById("filler");
var deg = 0;
var myInterval = setInterval(function() {
  deg = deg + 10;
  if (deg > 360) {
    clearInterval(myInterval);
  }
  ele.style.transform = `rotate(${deg}deg)`;
}, 500);

.filler-wrapper {
  height: 100px;
  width: 100px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to left, red 50%, green 50%);
}

.filler {
  border-radius: 0 100% 100% 0 / 50%;
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
  background: green;
  transform: rotate(0deg)
}

<div class="filler-wrapper">
  <div id="filler" class="filler"></div>
</div>

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);
}

<div id="box" style="--v:-90eg;--s:1"></div>
<!-- first  cycle : from -90deg to 90deg with s=1 -->
<!-- second cycle : from -90deg to 90deg with s=0 -->