CSS3制作同心圆进度条

1、css代码

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

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

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

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

2、html代码

 <div class="wrapper">
     <div class="hold hold1">
         <div class="pie pie1"></div>
     </div>
     <div class="hold hold2">
         <div class="pie pie2"></div>
     </div>
     <div class="bg"></div>
     <div class="circle"></div>
 </div>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

3、js代码

 var pie = {
     run:function(opts){
         if(!opts.pie1 || !opts.pie2) throw new Error('must be element pie1 and pie2.');
         var pie1 = $(opts.pie1), pie2 = $(opts.pie2);
         var percent = opts.percent || 0;
         var step = opts.step || 3;
         var delay = opts.delay || 50;
         var callback = opts.callback || $.noop;
         var i = 0, rage = 360 * percent;
         var djs = function(){
             i = i + step;
             if(i <= rage){
                 if(i <= 180){
                     if((180 - i) < step){ i = 180; }
                     pie1.css("-webkit-transform","rotate(" + i + "deg)");
                 } else {
                     if((rage - i) < step){ i = rage; }
                     pie2.css("-webkit-transform","rotate(" + (i-180) + "deg)");
                 }
                 callback(i, rage);
                 setTimeout(djs, delay);
             }
         };
         djs();
     }
 };
 pie.run({
     pie1:".pie1",
     pie2:".pie2",
     percent:0.75
 });

参考demo：http://liumiao.me/demo/count/

最新Canvas版

.jqm-round-wrap{
    display:block;position:relative;width:130px;height:130px;overflow:hidden;
    border-radius:65px;
    -webkit-border-radius:65px;
}
#jqm-round-sector{
    position:absolute;width:130px;height:130px;
}
.jqm-round-bg {
    position:absolute;width:130px;height:130px;background-color:#f4f6f6;
    border-radius:65px;
    -webkit-border-radius:65px;
}
.jqm-round-circle{
    position:absolute;background-color:#FFF;width:120px;height:120px;left:5px;top:5px;z-index:;
    border-radius:60px;
    -webkit-border-radius:60px;
}

<div class="jqm-round-wrap">
    <div class="jqm-round-bg"></div>
    <canvas id="jqm-round-sector"></canvas>
    <div class="jqm-round-circle">15<samp>%</samp></div>
</div>

var pie = {
    run:function(opts){
        if(!opts.id) throw new Error("must be canvas id.");
        var canvas = document.getElementById(opts.id), ctx;
        if(canvas && (ctx = canvas.getContext("2d"))){
            canvas.width = canvas.height = "200";
            var noop = function(){};
            var before = opts.onBefore || noop;
            var after = opts.onAfter || noop;
            before(ctx);
            ctx.fillStyle = opts.color || '#f4f6f6';
            var step = opts.step || 1;
            var delay = opts.delay || 10;
            var i = 0, rage = 360 * (opts.percent || 0);
            var sRage = -Math.PI * 0.5;
            var djs = function(){
                i = i + step;
                if(i <= rage){
                    ctx.beginPath();
                    ctx.moveTo(100, 100);
                    ctx.arc(100, 100, 100, sRage, Math.PI * 2 * (i/360)+sRage);
                    ctx.fill();
                    setTimeout(djs, delay);
                } else {
                    after(ctx);
                }
            };
            djs();
        }
    }
};
pie.run({
    id:"jqm-round-sector",
    percent:0.75,
    onBefore:function(ctx){
        ctx.fillStyle = '#47b28b';
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.arc(100, 100, 100, 0, Math.PI * 2);
        ctx.fill();
    }
});