CSS 360使用JS径向旋转进度 [英] CSS 360 rotating progress radial using JS

问题描述

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

I have created this radial progress but this works for only 180. How can I make it to rotate 360 deg.

推荐答案

以下是基于此先前答案的想法在这里，您可以仅使用背景进行操作:

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

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

这篇关于CSS 360使用JS径向旋转进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！