javascript - 使用 JS 的 CSS 360 旋转进度径向

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