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

  

    

      

    
    

      

      

    
  


Update Spinner