clip实现圆环进度条

效果主要通过clip和transform:rotate实现

把圆环分为左右两个部分，通过角度旋转对图片剪切旋转角度<=180度的时候之旋转右边，当大于180度时右边固定旋转180度的同时旋转左边。

html

<div class="circle">
    <div class="circle_leftwrap">
        <div class="circle_left"></div>
    </div>
    <div class="circle_rightwrap">
        <div class="circle_right"></div>
    </div>
    <div class="circle_mask">
        <span>20</span>%
    </div>
</div>

css

.circle{ 200px;height: 200px;border-radius: 50%;background-color: #28D58C;margin: 20px auto;position: relative;display: inline-block;margin: 40px 20px;}
    .circle .circle_left,.circle .circle_right{position: absolute;left: 0;top: 0;display: block; 200px;height: 200px;background-color: #333;border-radius: 50%;}
    .circle .circle_leftwrap,.circle .circle_rightwrap{position: absolute;left: 0;top: 0;display: block; 200px;height: 200px;}
    .circle .circle_left,.circle .circle_leftwrap{clip:rect(0,100px,auto,0);}
    .circle .circle_right,.circle .circle_rightwrap{clip:rect(0,auto,auto,100px);}
    .circle .circle_mask{background-color: #fff; 150px;height: 150px;position: absolute;left: 25px;top: 25px;border-radius: 50%;line-height: 150px;text-align: center;font-size: 30px;box-shadow: 0 0 10px rgba(0,0,0,.2);}

jq获取进度并算出旋转角度赋值

var num = $('.circle_mask>span').text()*3.6;
if(num<=180){
    $('.circle_right').css('transform','rotate(' + num + 'deg)');
}else{
    $('.circle_right').css('transform','rotate(180deg)');
    $('.circle_left').css('transform','rotate(' + (num-180) + 'deg)');
}

最终实现效果

 

 

0%