手把手教你做前端小插件:圆型进度条

由于业务需要,个人查了一下资料做了一个会滚动的百分比的圆型进度条,效果图如下,由于我的博客园js权限还没申请好,所以不能看到js运行的过程,在这里我总结一下实现过程。其中参考了http://www.tuicool.com/articles/AVRvmqm,并在此基础上进行了修改

 

效果图

效果图

   1.先创建一个正方形。

  .square{
            margin: 20px auto;
            width: 200px;
            height: 200px;
            border: 1px solid #aaa;
            position: relative;
        }
<div class="square">
</div>

  

效果图

   2.正方形左右各创建一个矩形,这里我为了显示比较明显,加上了有颜色的border,看上去两个矩形有重复,实际去掉border的位置两个矩形加起来刚好占据一个正方形.

   在这里overflow:hidden起到很重要作用,至于作用看到下一步就知道了

 .half-square{
            width: 100px;
            height: 200px;
            position: absolute;
       overflow:hidden;
            top:0;
        }
        .half-square.left{
            left: 0;
            border: 1px solid red;
        }
        .half-square.right{
            right:0;
            border: 1px solid green;
        }   
  <div class="square">
        <div class="half-square left"></div>
        <div class="half-square right"></div>
    </div>

效果图

   3.这一步可以把上面的写的两个矩形的border去掉了。在这一步我先简单介绍一下border-radius这个属性,通过他可以设置border的弯曲度,通常而言我们都设置他为50%来达到圆型的效果。想更详细了解这个属性,各位童鞋可以自行百度一下,或者看看我的对border-radius的介绍  http://www.cnblogs.com/s-b-b/p/5830119.html

   这里我们在右边矩形里面加入一个右半圆。本来应该可以显示半个圆形的,但是由于上面设置overflow:hidder,使得他只能显示一部分。

        .circle{
            width: 160px;
            height: 160px;
            border: 20px solid transparent;
            border-radius: 50%; 
            position: absolute;
            top:0;
        }
        .circle.right{
            right: 0;
            border-top:20px solid red; 
            border-right:20px solid red; 
        }
    <div class="square">
        <div class="half-square left">
            <!-- <div class="circle left"></div> -->
        </div>
        <div class="half-square right">
            <div class="circle right">
                
            </div>
        </div>
    </div>

效果图

   4.通过旋转调整的到不同进度

            .circle.right{
            right: 0;
            border-right:20px solid red; 
            border-top: 20px solid red;
            transform: rotate(45deg);
        }

 

 

效果图

  通过旋转45%就可以获得一个完整的半圆,同理我们如果不想显示,也就是进度为0,只需要旋转-135%。这样我们就可以通过旋转角度来表达进度的多少

  5.同理得到左半圆,我们也可以通过旋转左半圆得到不同的进度,旋转135%左半圆就不会显示,旋转325%左半圆就会完全显示

        .circle.left{
            left: 0;
            border-left:20px solid red; 
            border-top: 20px solid red;
            transform: rotate(-45deg);
        }
    <div class="square">
        <div class="half-square left">
            <div class="circle left">
            </div>
        </div>
        <div class="half-square right">
            <div class="circle right">
            </div>
        </div>
    </div>

效果图

  6.实现40%进度的显示

  经历过刚刚的展示,我们知道如果我们想左边显示的有效旋转角度是135%~325%,而右边显示的有效角度是-135%~45%,因此我们只需要根据进度去调整左右两个圆就好了。我们知道50%进度对应的180%的圆弧,也就是1点进度对应3.6圆弧度

  因为我们只想显示40度,即小于50度的角度,只需要右半圆显示就好了,左半圆对他进行隐藏。因此我们有以下设置

        .circle.left{
            left: 0;
            border-left:20px solid red; 
            border-top: 20px solid red;
            transform: rotate(135deg);
        }

  而右边显示-135%~45%之间的40度就好了,也就是-135%+40*3.6,即9%。

            .circle.right{
            right: 0;
            border-right:20px solid red; 
            border-top: 20px solid red;
            transform: rotate(9deg);
        }

效果图

   7.显示70%的进度

    此时右半圆肯定是全部都显示出来了,因为右半圆代表50%,而只需要调整左半圆的20%就好了,而从第五步可以知道,左半圆的有效旋转范围是135%~325%,而我们显示的是20%,所以需要135+20*3.6即207度。

 效果图

  8.通过js自动根据参数调整角度

  我们总不能去傻乎乎地根据百分比去手动设置旋转度数,此时就需要借助js去调整。

  这里我就不慢慢分析代码了,其实上面已经解释得很清楚了,下面只不过是用代码表示,主要是通过修改左右半圆的属性值去修改角度,别忘了把两个半圆的初始值设为0哦

function circlePercent(percent){
            if(percent>100 || percent<0){
                return false;
            }else{
                if(percent<=50){
                    per=percent*3.6-135;
                    document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
                }else{
                    per=(percent-50)*3.6+135;
                    document.getElementById("right-circle").style.transform = "rotate(45deg)";
                    document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
                }
            }
            
        }

  9.添加动画效果。

  主要是通过设置js的setInterval来一点点调整角度,最终代码如下,直接ctrl+c,ctrl+v就可以用了....

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .square{
            margin: 20px auto;
            width: 200px;
            height: 200px;
            /*border: 1px solid #aaa;*/
            position: relative;
        }
        .half-square{
            width: 100px;
            height: 200px;
            position: absolute;
            overflow: hidden;
            top:0;
        }
        .half-square.left{
            left: 0;
            /*border: 1px solid rgb(3,205,203);*/
        }
        .half-square.right{
            right:0;
            /*border: 1px solid green;*/
        }
        .background{
            width:200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .circle{
            width: 160px;
            height: 160px;
            border: 20px solid transparent;
            border-radius: 50%; 
            position: absolute;
            top:0;
        }
        .circle.left{
            left: 0;
            border-left:20px solid rgb(3,205,203); 
            border-top: 20px solid rgb(3,205,203);
            transform: rotate(135deg);
        }
        .circle.right{
            right: 0;
            border-right:20px solid rgb(3,205,203); 
            border-top: 20px solid rgb(3,205,203);
            transform: rotate(-135deg);
        }
        .circle.inner{
            border:20px solid rgb(230,230,230); 
            display: table-cell;
            vertical-align: middle;
            position: relative;
        }
        .inner-content{
            margin: 0 auto;
            width: 50%;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        var percent = 0;
        var circleTimeId = null;
        function circlePercent(time){
            if(percent>100 || percent<0){
                return false;
            }
            if(percent > time ){
                clearInterval(circleTimeId); 
            }else{
                if(percent<=50){
                    per=percent*3.6-135;
                    document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
                }else{
                    per=(percent-50)*3.6+135;
                    document.getElementById("right-circle").style.transform = "rotate(45deg)";
                    document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
                }
                document.getElementById("percent-num").innerHTML= percent;
                percent = percent + 1;
            }
        }
        function time(time){
            circleTimeId = setInterval("circlePercent("+time+")",20);
        }
    </script>
</head>
<body onload="time(70)">
    <div class="square">
        <div class="background">
            <div class="circle inner">
                <div class="inner-content"><span id="percent-num">0</span>%</div>
                <div class="inner-content">进度</div>
            </div>
        </div>
        <div class="half-square left">
            <div class="circle left" id="left-circle">
            </div>
        </div>
        <div class="half-square right">
            <div class="circle right" id="right-circle">
            </div>
        </div>
    </div>

</body>
</html>

 

转载于:https://www.cnblogs.com/s-b-b/p/5829283.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值