CSS3实现圆环进度条

Html:

<div class="wrap">
　　<div class="leftWrap">
        <div class="left"></div>
    </div>
    <div class="rightWrap">
        <div class="right"></div>
    </div>
  <div class="proportion">50<span>%</span></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var num = parseInt($(".proportion").html())*3.6;
if(num<180){
　　$(".left").css("transform","rotate(" + num + "deg)");
}else{
　　$(".left").css("transform","rotate(180deg)");
　　$(".right").css("transform","rotate(" + (num-180) + "deg)");
}
</script>

Css:

.wrap {
    transform:rotate(-180deg);
    width:110px;
    height:110px;
    position:relative;
    border-radius:50%;
    background:#42c02e;
}
.leftWrap {
    width:55px;
    height:110px;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}
.rightWrap {
    width:55px;
    height:110px;
    position:absolute;
    right:0;
    top:0;
    overflow:hidden;
}
.left {
    width:55px;
    height:110px;
    border-radius:55px 0 0 55px;
    background:#ddd;
    transform-origin:right center;
}
.right {
    width:55px;
    height:110px;
    border-radius:0 55px 55px 0;
    background:#ddd;
    transform-origin:left center;
}
.proportion {
    transform:rotate(180deg);
    width:96px;
    height:96px;
    line-height:96px;
    position:absolute;
    top:7px;
    left:7px;
    background:#fff;
    border-radius:50%;
    text-align:center;
    font-size:20px;
}

效果如下：