html部分：

    
      
     
           
      
               
       
             
        
             
         
          0%
         
        
       
      
     
    

最内层的div3裁剪一半然后旋转需要的角度，

css代码：

.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;}.div1 { background:#ccc; position:relative;}.right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;}.right-div2, .right-div3 { clip:rect(0,auto,auto,100px);}.left-div2, .left-div3 { clip:rect(0,100px,auto,auto);}.right-div3 { background:#f00; transform:rotate(-180deg);}.left-div3 { background:#f00; transform:rotate(-180deg);}.div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;}

js代码：

$(function(){ var a = 0; var b = 0; var timer = setInterval(function(){  a++;  if(a<=50){    //-180deg是0%，转换一下    b = a*3.6-180;    $('.right-div3').css('transform','rotate(' + b + 'deg)');     }else if(a>50&&a<=100){    //超过50%，需要修改左边的,右边0deg是50%    $('.right-div3').css('transform','rotate(0)');     //左边0deg是100%，转换一下    b = a*3.6-360;    $('.left-div3').css('transform','rotate(' + b + 'deg)');   }else{    clearInterval(timer);    return;   }   $('.div4 span').html(a); },200);});