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>