css:
.circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc; } .pie_left, .pie_right{ width:200px; height:200px; position: absolute; border-radius: 50%; top: 0px;left: 0px; background: #ccc; } .pie_right { clip:rect(0,auto,auto,100px); } .pie_left { clip:rect(0,100px,auto,0); } .mask { width: 180px; height: 180px; border-radius: 50%; left: 10px; top: 10px; background: #FFF; position: absolute; text-align: center; line-height: 180px; font-size: 36px; }
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="circle"> <div class="pie_left"></div> <div class="pie_right"></div> <div class="mask"><span>100</span>%</div> </div> </body> </html>
jQuery:
$(function() { if( $('.mask span').text() <= 50 ){ $('.pie_right').css('transform','rotateZ('+($('.mask span').text()*3.6)+'deg)'); }else { $('.pie_left').css('transform','rotateZ('+(($('.mask span').text()-50)*3.6)+'deg)'); $('.pie_right').css('background','#0cc'); } })
基本原理：
最外侧的div是背景是进度条的颜色，
其中间有三个div盒子，分别是左侧，右侧，显示百分比的区域。
左侧和右侧分别使用clip属性对其进行裁剪。
通过js进行旋转。
当值小于50的时候右侧的旋转：值*3.6+deg；
当值大于50的时候左侧旋转的度数为：值-50*3.6+deg;