jquery、css3动态显示百分比圆

jquery、css3动态显示百分比圆

实习了半年，最大的收获就是想学好前端就要奈得住寂寞，收得了心。虽然我还不能向我老大一样，没事就看书，，，，只要没事就看书的好习惯，不过会慢慢好起来的，最近看了一个设计图，其中有一个功能就是根据客户的融资进度来显示不同的百分比，如下图：

最开始看到的第一反应就是找找有没有相应的插件，上网查了一些资料，主要用到css的rect(top,right,bottom,left)、transform: rotate(deg)属性

html

 <div class="circle">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="theValue"><span class="vauNum">81</span>%</div>
    </div>
       <div class="circle">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="theValue"><span class="vauNum">20</span>%</div>
    </div>

css

.circle {
    width: 200px;
    height: 200px;  
    position: relative;
    float:left;
    border-radius: 50%;
    background: #F64E58;
    overflow: hidden;
}
.pie_left, .pie_right {
    width: 200px; 
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    width:200px; 
    height:200px;
    background:#C3C3C3;
    border-radius: 50%;
    position: absolute;