使用CSS/jQuery填充圆圈的背景颜色

Question

我有一个在setInterval上运行的JS脚本,脚本进度存储在progressPercentage变量中.我正在使用此百分比值来修改具有bgcolor的子div的宽度.随着它变得越来越大,它开始填充更多的父div.

使用方形非常简单,但我很难填充圆形(border-radius: 100%).

现在我正在使用2个div,我知道有更好的方法可以做到这一点,但现在这就是它的样子:

<div id="load-bar-frame">
  <div id="load-bar"></div>
</div>

这是CSS:

#load-bar-frame {
  height: 200px;
  width: 200px;
  border-radius: 100%;
  padding: 3px;
  border: 1px solid #fff;
  margin: 20px auto 0 auto;
  display: block;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

#load-bar {
  border-radius: 100%;
  background: #fff;
  width: 0%;
  height: 100%;
}

JS通过增加宽度来填充背景,#load-bar因为它的宽度增加它填满了#load-bar-framediv.

问题是,在子div的宽度将从0开始,因此它是一个真正的串环并且不适合父div.

的jsfiddle

所以我正在寻找一种更好的填充bgcolor的方法.

Answer 1

尝试:

var per = 0;
setInterval(function(){ 
per++;
if(per <= 100){
    $('#load-bar').css({background: "linear-gradient(to right, #000000 "+per+"%,transparent "+per+"%,transparent 100%)"});
   
}

}, 100);

#load-bar-frame {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  padding: 3px;
  border: 1px solid #000;
  margin: 20px auto 0 auto;
  display: block;
  position: absolute;
  top 20px;
  left: 20px;
}

#load-bar {
  width: 100%; /* in this case 20% would be the current progress */
  height: 100%;
  border-radius: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load-bar-frame">
  <div id="load-bar"></div>
</div>

http://jsfiddle.net/6saxtnen/2/