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></span>%
    </div>
</div>

css

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

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

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

最终实现效果

 

 

0%