页面效果：圆形进度条 环形进度条

Posted 2020-06-30 21270

环形进度条（1.5秒之内倒计时）

效果做的比较粗糙，就是css的 clip属性，先切右边一半，再切左边一半。根据三角函数计算y高度

http://www.w3school.com.cn/cssref/pr_pos_clip.asp　　css的clip属性

<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".box").click(function(){
        var x000 = 360;
        var x = 0;
        var timer = setInterval(function(){
            var a = x / 180;
            y=(1-Math.cos(Math.PI*a))*50;
            console.log(x);
            console.log(‘>>>> y = ‘+y);
            if(x<=180){
                $(‘.clip-r‘).css(‘clip‘,‘ rect(0px  100px  ‘+y+‘px  50px)‘);
            }else{
                $(‘.clip-l‘).css(‘clip‘,‘ rect(‘+y+‘px  50px  100px  0px)‘);
            }
            $(‘.txt‘).html(parseInt(x/360*100)+‘%‘);
            x = x+10;
            if(x > x000){
                clearInterval(timer);
            }
        },20);//定时循环n次
   });

});
</script>
<style type="text/css">
.box{position:relative;width:100px;height:100px;overflow:hidden;}
.txt{position:absolute;left:0;top:40px;width:100px;height:20px;text-align:center;color:#999;font-size:20px;font-weight:bold;z-index:1;}

.clipbox{position:absolute;width:100px;height:100px;border-radius:50%;background:#ff3388;box-shadow:0px 0px 10px #999;}
.clip-r{clip: rect(0px 100px 100px 50px);}
.clip-l{clip: rect(0px 50px 100px 0px);}
.clip-0{clip: rect(0 0 0 0);}
.box-fff{position:absolute;left:10px;top:10px;width:80%;height:80%;border-radius:50%;background:#fff;}
</style>
<div class="box">
    <div class="txt"></div>
    <div class="clipbox clip-r">
        <div class="box-fff"></div>
    </div>
    <div class="clipbox clip-l">
        <div class="box-fff"></div>
    </div>
</div>

 

 

...