利用jQuery和CSS实现环形进度条

 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>0span>%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>15span>%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>30span>%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>60span>%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>90span>%div>
25     div>

 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         }

 1 $(function() {
 2             $(‘.circle‘).each(function(index, el) {
 3                 var num = $(this).find(‘span‘).text() * 3.6;
 4                 if (num) {
 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         });