首页 > 代码库 > 利用jQuery和CSS实现环形进度条

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

2024-07-02 21:52:13   217人阅读

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


联系
我们