CSS 360使用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>

我已经创建了这个径向进度，但是仅能工作180度。如何使其旋转360度。

Answer 1

这是一个基于this previous answer的想法，您可以在没有背景的情况下做到这一点：

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

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

以上内容仅适用于Chrome

Answer 2

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