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-frame div。

问题是，在子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/

Answer 2

var per = 1;
jQuery(document).ready(function(){
  setInterval(changeSize, 100);
});

function changeSize(){
	per++;
    if(per <= 100){
    	$("#load-bar").width(per + "%");
        $("#load-bar").height(per + "%");
        $("#load-bar").css("top" , (50 - (per / 2)) + "%");
         $("#load-bar").css("left" , (50 - (per / 2)) + "%")
    }
}

#load-bar-frame {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  padding: 3px;
  border: 1px solid #000;
  margin: 20px auto 0 auto;
  display: block;
  position: relative;
  top 20px;
  left: 20px;
}

#load-bar {
  background: #000;
  width: 20%; /* in this case 20% would be the current progress */
  height: 20%;
  border-radius: 100%;
    top:50%;
    left:50%;
  position:absolute;
}

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

Answer 3

＆＃13;

var per = 1;
jQuery(document).ready(function(){
  setInterval(changeSize, 100);
});

function changeSize(){
	per++;
    if(per <= 100){
    	$("#load-bar").width(per + "%");

    }
}

＆＃13;

#load-bar-frame {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  padding: 3px;
  border: 1px solid #000;
  margin: 20px auto 0 auto;
  display: block;
  position: relative;
  top 20px;
  left: 20px;
    overflow:hidden;
}

#load-bar {
  background: #000;
  width: 20%; /* in this case 20% would be the current progress */
  height: 100%;
 
  top:0%;
  left:0%;
  position:absolute;
}

＆＃13;

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

＆＃13;

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

3 个答案: