css3实现圆形进度条

最新推荐文章于 2024-12-16 23:12:55 发布

weixin_34034670

最新推荐文章于 2024-12-16 23:12:55 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/1067377855/blog/411842

2019独角兽企业重金招聘Python工程师标准>>>

html部分：

<div class="div1">
 <div class="right-div2">
     <div class="right-div3"></div>
    </div>
    <div class="left-div2">
     <div class="left-div3"></div>
    </div>
</div>
<div class="div4"><span>0</span>%</div>

最内层的div3裁剪一半然后旋转需要的角度，
父级div2裁剪一半，此时已经裁剪出来了那个扇形了
最后在上面加个圆形遮盖层

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);
});

转载于:https://my.oschina.net/1067377855/blog/411842