圆环进度条

圆环进度条，根据环内的数字，实现百分比进度。

实现原理：使用css3圆角画出来一个圆，利用clip遮盖，裁处半圆，利用两个半圆拼接成一个整圆。然后在上面再次覆盖一个圆形，控制下面每个半圆的旋转角度，从而达到效果。

1
html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
      <div class="circle first">
          <section class="circle_left"><div></div></section>
          <section class="circle_right"><div></div></section>
          <span id="plan_num1">25%</span>
      </div>
      <div class="circle second">
          <section class="circle_left"><div></div></section>
          <section class="circle_right"><div></div></section>
          <span id="plan_num2">50%</span>
      </div>
      <div class="circle third">
          <section class="circle_left"><div></div></section>
          <section class="circle_right"><div></div></section>
          <span id="plan_num3">75%</span>
      </div>
      <div class="circle fourth">
          <section class="circle_left"><div></div></section>
          <section class="circle_right"><div></div></section>
          <span id="plan_num4">100%</span>
      </div>
  </div>
css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
* {margin: 0;padding: 0}
.container .first {
    left: 10px;
    top: 20px;
}
.container .second {
    left: 10px;
    top: 100px;
}
.container .third {
    left: 10px;
    top: 180px;
}
.container .fourth {
    left: 10px;
    top: 260px;
}

.circle {
    width: 74px;
    height: 74px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    background: #f04f4b;
    position: absolute;
}
.circle .circle_left {
    display: block;
    width: 74px;
    height: 74px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position: absolute;
    left: 0;
    top: 0;
    clip: rect(0,37px,74px,0)
}
.circle .circle_left div,.circle .circle_right div {
    display: block;
    width: 74px;
    height: 74px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position: absolute;
    left: 0;
    top: 0;
    background: #eee;
}
.circle .circle_left div {clip: rect(0,37px,74px,0)}
.circle .circle_right div {clip: rect(0,74px,74px,37px)}
.circle .circle_right {
    display: block;
    width: 74px;
    height: 74px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position: absolute;
    left: 0;
    top: 0;
    clip: rect(0,74px,74px,37px)
}
.circle span {
    display: block;
    width: 68px;
    height: 68px;
    font-size:  27px;
    text-align: center;
    line-height: 68px;
    background: #fff;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    color: #f04f4b;
    position: absolute;
    top: 3px;
    left: 3px;
}
js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
window.onload = function () {
    circleAnimate('plan_num1');
    circleAnimate('plan_num2');
    circleAnimate('plan_num3');
    circleAnimate('plan_num4');
    $('#app_x').on('click', function () {
        $(this).parent().hide();
    });
    function circleAnimate(which){
        var span = $('#'+which);
        var num = parseInt(span.text());
        var degS = num/100*360;
        if(degS<=180){
            var r = 0;
            var timer = setInterval(function () {
                r++;
                if (r>=degS){
                    clearInterval(timer);
                }
                span.siblings('.circle_right').children().css('transform',"rotate(" + r + "deg)");
            },5)
        }else{
            var r = 0;
            var timer = setInterval(function () {
                r++;
                if (r>=degS){
                    clearInterval(timer);
                }if(r<=180){
                    span.siblings('.circle_right').children().css('transform',"rotate(" + r + "deg)")
                }else{
                    span.siblings('.circle_left').children().css('transform',"rotate(" + (r -180) + "deg)")
                }
            },5)
        }
    }
}