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

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

利用jQuery和CSS实现环形进度条,布布扣,bubuko.com