CSS3实现圆形进度条
原理
最外的正方形容器内，左右两个矩形div各占一半，设置超出隐藏。
左右矩形内分别有一个方形div，设置边框圆角，一半边框绿色（表示进度），形成半圆环。
通过计时器+css3旋转左右圆环实现进度显示。
效果
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆形进度条</title>
<style>
.circleProgress_wrapper {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
p{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size:24px;
color: green;
}
.wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.right {
right: 0;
}
.left {
left: 0;
}
.circleProgress {
width: 160px;
height: 160px;
border: 20px solid #ccc;
border-radius: 50%;
position: absolute;
top: 0;
}
.rightcircle {
border-bottom: 20px solid green;
border-left: 20px solid green;
right: 0;
transform: rotate(45deg);
}
.leftcircle {
border-top: 20px solid green;
border-right: 20px solid green;
left: 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="circleProgress_wrapper">
<p><span class="process">0</span>%</p>
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
<script type="text/javascript">
document.onclick = function() {
var dom = document;
var num_right = 45;
var num_left = 45;
var process_num=0;
var timer = setInterval(function() {
if (num_right < 225) {
num_right++;
dom.getElementsByClassName("rightcircle")[0].style = "transform:rotate(" + num_right + "deg)";
} else {
if (num_left < 225) {
num_left++;
dom.getElementsByClassName("leftcircle")[0].style = "transform:rotate(" + num_left + "deg)";
} else {
process_num=100;
dom.getElementsByClassName("process")[0].innerHTML=process_num;
clearInterval(timer);
}
}
}, 100);
}
</script>
</body>
</html>