html代码
1 <div class="circle" style="left:0"> 2 <div class="pie_left"><div class="left"></div></div> 3 <div class="pie_right"><div class="right"></div></div> 4 <div class="mask"><span>0</span>%</div> 5 </div> 6 <div class="circle" style="left:220px"> 7 <div class="pie_left"><div class="left"></div></div> 8 <div class="pie_right"><div class="right"></div></div> 9 <div class="mask"><span>15</span>%</div> 10 </div> 11 <div class="circle" style="left:440px"> 12 <div class="pie_left"><div class="left"></div></div> 13 <div class="pie_right"><div class="right"></div></div> 14 <div class="mask"><span>30</span>%</div> 15 </div> 16 <div class="circle" style="left:660px"> 17 <div class="pie_left"><div class="left"></div></div> 18 <div class="pie_right"><div class="right"></div></div> 19 <div class="mask"><span>60</span>%</div> 20 </div> 21 <div class="circle" style="left:880px"> 22 <div class="pie_left"><div class="left"></div></div> 23 <div class="pie_right"><div class="right"></div></div> 24 <div class="mask"><span>90</span>%</div> 25 </div>
css 代码
1 body { 2 font-family: "微软雅黑"; 3 } 4 .circle { 5 width: 200px; 6 height: 200px; 7 position: absolute; 8 border-radius: 50%; 9 background: #0cc; 10 } 11 .pie_left, .pie_right { 12 width:200px; 13 height:200px; 14 position: absolute; 15 top: 0;left: 0; 16 } 17 .left, .right { 18 width:200px; 19 height:200px; 20 background:#00aacc; 21 border-radius: 50%; 22 position: absolute; 23 top: 0; 24 left: 0; 25 } 26 .pie_right, .right { 27 clip:rect(0,auto,auto,100px); 28 } 29 .pie_left, .left { 30 clip:rect(0,100px,auto,0); 31 } 32 .mask { 33 width: 150px; 34 height: 150px; 35 border-radius: 50%; 36 left: 25px; 37 top: 25px; 38 background: #FFF; 39 position: absolute; 40 text-align: center; 41 line-height: 150px; 42 font-size: 20px; 43 font-weight: bold; 44 color: #00aacc; 45 }
js代码
1 $(function() { 2 $('.circle').each(function(index, el) { 3 var num = $(this).find('span').text() * 3.6; 4 if (num<=180) { 5 $(this).find('.right').css('transform', "rotate(" + num + "deg)"); 6 } else { 7 $(this).find('.right').css('transform', "rotate(180deg)"); 8 $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)"); 9 }; 10 }); 11 12 });
另外jquery的库推荐使用最新版本。
转载请注明：http://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html