CSS 360 rotating progress radial using JS

Answer 1

For JS

isCompleted = false;

progressCount = 10;

function updateProgress() {
  progressCount = progressCount + 10;
  const _count = progressCount * 1.8;
  console.log(_count)
  if (_count > 180) {
    isCompleted = true;
  }
  if (this.isCompleted) {
    return;
  }
  _rotateSpinner(_count);
}

var elCircleFullFill = document.getElementById("circleFullFill");
var elCircleHalfFill = document.getElementById("circleHalfFill");
var elCircleMaskFull = document.getElementById("circleMaskFull");
var elCircleFillFix = document.getElementById("circleFillFix");

function _rotateSpinner(__progressCount) {
  const fillRotation = __progressCount;
  const fixRotation = __progressCount * 2;
  elCircleFullFill.style = `transform:rotate(${fillRotation}deg)`;
  elCircleHalfFill.style = `transform:rotate(${fillRotation}deg)`;
  elCircleMaskFull.style = `transform:rotate(${fillRotation}deg)`;
  elCircleFillFix.style = `transform:rotate(${fixRotation}deg)`;
}

SCSS

.progress-radial {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  .circle {
    .circle-mask,
    .circle-fill {
      width: 50px;
      height: 50px;
      position: absolute;
      border-radius: 50%;
      transition: -webkit-transform 1s;
      transition: -ms-transform 1s;
      transition: transform 1s;
      -webkit-backface-visibility: hidden;
    }
    .circle-mask {
      clip: rect(0px, 50px, 50px, 50px/2);
      .circle-fill {
        clip: rect(0px, 50px/2, 50px, 0px);
        background-color: #0096FF;
      }
    }
  }
}

HTML

<div class="progress-radial">
  <div class="circle">
    <div class="circle-mask" id="circleMaskFull">
      <div class="circle-fill" id="circleFullFill"></div>
    </div>
    <div class="circle-mask">
      <div class="circle-fill" id="circleHalfFill"></div>
      <div class="circle-fill" id="circleFillFix"></div>
    </div>
  </div>
</div>

<button onclick="updateProgress()">Update Spinner</button>

Answer 2

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 -->

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

<div id="box" ></div>

The above should work only on Chrome