CSS3制作同心圆进度条

浏览数：116 / 时间：2015年06月09日

1、css代码

此处在制作进度条时，是旋转进度条的半圆（红色），背景使用灰白（如果使用红色作为背景，旋转灰白遮罩，在浏览器中可能会有渲染bug）

1 .wrapper{ display:block;position:relative;width:100px;height:100px;border-radius:50px;overflow:hidden; }
2 .pie { position:absolute;background-color:#e74c3c;width:100px;height:100px; }
3 .pie1 { clip:rect(0px,50px,100px,0px); }
4 .pie2 { clip:rect(0px,100px,100px,50px); }
5 .hold { width:100px;height:100px;position:absolute;z-index:1; }
6 .hold1 { clip:rect(0px,100px,100px,50px); }
7 .hold2 { clip:rect(0px,50px,100px,0px); }
8 .bg { width:100px;height:100px;background-color:#f4f6f6;position:absolute; }
9 .circle{position:absolute;background-color:#FFF;width:90px;height:90px;border-radius:45px;left:5px;top:5px;z-index:10;}

以下的css的代码会产生渲染bug（导致灰白外侧有红色细线）

1 .wrapper{ display:block;position:relative;width:100px;height:100px;border-radius:50px;overflow:hidden; }
2 .pie { position:absolute;background-color:#f4f6f6;width:100px;height:100px; }
3 .pie1 { clip:rect(0px,100px,100px,50px); }
4 .pie2 { clip:rect(0px,50px,100px,0px); }
5 .hold { width:100px;height:100px;position:absolute;z-index:1; }
6 .hold1 { clip:rect(0px,100px,100px,50px); }
7 .hold2 { clip:rect(0px,50px,100px,0px); }
8 .bg { width:100px;height:100px;background-color:#e74c3c;position:absolute; }
9 .circle{position:absolute;background-color:#FFF;width:90px;height:90px;border-radius:45px;left:5px;top:5px;z-index:10;}

2、html代码

 1 <div class="wrapper">
 2     <div class="hold hold1">
 3         <div class="pie pie1"></div>
 4     </div>
 5     <div class="hold hold2">
 6         <div class="pie pie2"></div>
 7     </div>
 8     <div class="bg"></div>
 9     <div class="circle"></div>
10 </div>
11 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

3、js代码

 1 var pie = {
 2     run:function(opts){
 3         if(!opts.pie1 || !opts.pie2) throw new Error(‘must be element pie1 and pie2.‘);
 4         var pie1 = $(opts.pie1), pie2 = $(opts.pie2);
 5         var percent = opts.percent || 0;
 6         var step = opts.step || 3;
 7         var delay = opts.delay || 50;
 8         var callback = opts.callback || $.noop;
 9         var i = 0, rage = 360 * percent;
10         var djs = function(){
11             i = i + step;
12             if(i <= rage){
13                 if(i <= 180){
14                     if((180 - i) < step){ i = 180; }
15                     pie1.css("-webkit-transform","rotate(" + i + "deg)");
16                 } else {
17                     if((rage - i) < step){ i = rage; }
18                     pie2.css("-webkit-transform","rotate(" + (i-180) + "deg)");
19                 }
20                 callback(i, rage);
21                 setTimeout(djs, delay);
22             }
23         };
24         djs();
25     }
26 };
27 pie.run({
28     pie1:".pie1",
29     pie2:".pie2",
30     percent:0.75
31 });