1、原理：
1、首先有一個(gè)圓：#333的純凈的圓,效果：
image.png
2、再來(lái)兩個(gè)半圓，左邊一個(gè)，右邊一個(gè)將此黑色的圓蓋住，效果：
image.png
此時(shí)將右半圓旋轉(zhuǎn)30°，就會(huì)漏出底圓，效果：
image.png
此時(shí)再將右半圓的顏色改為yellow色，就會(huì)出現(xiàn)一個(gè)30/360的餅圖：
image.png
然后我們?cè)儆靡粋€(gè)比底圓小的圓去覆蓋這個(gè)大圓不就可以出進(jìn)度條效果了嗎
image.png
好了，放代碼，畢竟也不是我原創(chuàng)，我再照著作者的思路走一遍就是理解一下思路而已~
<style>
/*支持IE9及以上*/
.circle-bar {margin: 20px; font-size:200px; width: 1em; height: 1em; position: relative; background-color: #333; }
.circle-bar-left,.circle-bar-right { width: 1em; height: 1em; }
/*
這里采用clip剪切了圓，實(shí)現(xiàn)左右兩個(gè)半圓，右半圓在后面，因此在更上一層，
clip的用法參考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right { clip:rect(0,auto,auto,.5em);background-color: red; }
.circle-bar-left { clip:rect(0,.5em,auto,0); background-color: yellow;}
.mask { width: 0.8em; height: 0.8em; background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
.mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block; }
/*所有的后代都水平垂直居中，這樣就是同心圓了*/
.circle-bar * { position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
/*自身以及子元素都是圓*/
.circle-bar, .circle-bar > * { border-radius: 50%; }
</style>
<body>
<div class="circle-bar">
<div class="circle-bar-left"></div>
<div class="circle-bar-right"></div>
<!--遮罩層，顯示百分比-->
<div class="mask">
<span class="percent">60%</span>
</div>
</div>
<script>
$(function(){
var percent = parseInt($('.mask :first-child').text());
var baseColor = $('.circle-bar').css('background-color');
if( percent<=50 ){
$('.circle-bar-right').css('transform','rotate('+(percent*3.6)+'deg)');
}else {
$('.circle-bar-right').css({
'transform':'rotate(0deg)',
'background-color':baseColor
});
$('.circle-bar-left').css('transform','rotate('+((percent-50)*3.6)+'deg)');
}
})
</script>
作者還使用了js原生去實(shí)現(xiàn)
//反正CSS3中的border-radius屬性IE8是不支持了，所以這里就用新方法吧getElementsByClassName()走起
window.onload = function(){
var circleBar = document.getElementsByClassName('circle-bar')[0];
var percent = parseInt(circleBar.getElementsByClassName('percent')[0].firstChild.nodeValue);
var color = circleBar.css('background-color');
var left_circle = circleBar.getElementsByClassName('circle-bar-left')[0];
var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0];
if( percent <= 50 ) {
var rotate = 'rotate('+(percent*3.6)+'deg)';
right_circle.css3('transform',rotate);
}else {
var rotate = 'rotate('+((percent-50)*3.6)+'deg)';
right_circle.css ('background-color',color);//背景色設(shè)置為進(jìn)度條的顏色
right_circle.css3('transform','rotate(0deg)');//右側(cè)不旋轉(zhuǎn)
left_circle.css3 ('transform',rotate);//左側(cè)旋轉(zhuǎn)
}
}
//封裝了css3函數(shù)，主要是懶得重復(fù)書(shū)寫(xiě)代碼，既然寫(xiě)了css3函數(shù)，順便寫(xiě)個(gè)css吧，統(tǒng)一樣式，好看一些
Element.prototype.css = function(property,value){
if ( value ) {
//CSS中像background-color這樣的屬性，‘-’在JavaScript中不兼容，需要設(shè)置成駝峰格式
var index = property.indexOf('-');
if( index != -1 ) {
var char = property.charAt(index+1).toUpperCase();
property.replace(/(-*){1}/,char);
}
this.style[property] = value;
}else{
//getPropertyValue()方法參數(shù)類似background-color寫(xiě)法，所以不要轉(zhuǎn)駝峰格式
return window.getComputedStyle(this).getPropertyValue(property);
}
}
//封裝一個(gè)css3函數(shù)，用來(lái)快速設(shè)置css3屬性
Element.prototype.css3 = function(property,value){
if( value ){
property = capitalize(property.toLowerCase());
this.style['webkit'+property] = value;
this.style['Moz'+property] = value;
this.style['ms'+property] = value;
this.style['O'+property] = value;
this.style[property.toLowerCase()] = value;
}else{
return window.getComputedStyle(this).getPropertyValue(
('webkit'+property)||('Moz'+property)||('ms'+property)||('O'+property)||property);
//老實(shí)說(shuō)，我不知道為什么要把不帶瀏覽器標(biāo)記的放在最后，既然都這么用，我也這么做吧。不過(guò)這樣對(duì)現(xiàn)代瀏覽器來(lái)說(shuō)可能并不好，判斷次數(shù)變多了
}
//首字母大寫(xiě)
function capitalize(word){
return word.charAt(0).toUpperCase() + word.slice(1);
}
}
下一篇將講實(shí)現(xiàn)動(dòng)態(tài)的圓形進(jìn)度條和動(dòng)態(tài)條形進(jìn)度條~
