版权声明：JiahaoZhang原创文章，转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/84144216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circliful</title>
<link rel="stylesheet" href="link/jquery.circliful.css">
</head>
<body>
<div class="stat-div">
<div id="stat-one" data-dimension="160" data-text="0%" data-info="正在导入..." data-width="8" data-fontsize="38" data-percent="0" data-fgcolor="#02FF9A" data-bgcolor="#3C4247" style="margin: 30px auto;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="link/jquery.min.js"></script>
<script type="text/javascript" src="link/jquery.circliful.js"></script>
<script type="text/javascript">
$('#stat-one').circliful();
var statId = $('#stat-one').attr('id');
var idNum = 0;
setInterval(function () {
idNum+=1;
var statHtml = '<div id="'+ statId+idNum +'" data-dimension="160" data-text="'+idNum+'%' +'" data-info="正在导入..."'+ 'data-width="8" data-fontsize="38" data-percent="'+ idNum +'" data-fgcolor="#02FF9A"'+ 'data-bgcolor="#3C4247" style="margin: 30px auto;"></div>';
$('.stat-div').html(statHtml);
$('#'+statId+idNum).circliful();
if (idNum >= 100) {
idNum = 0;
}
},2000);
</script>
</html>if (curPerc < endPercent) {
curPerc += curStep;
// 将requestAnimationFrame注释掉，为了使圆环每次都不从0开始
// requestAnimationFrame(function () {
animate(Math.min(curPerc, endPercent) / 100);
// });
}