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

由于业务需要，个人查了一下资料做了一个会滚动的百分比的圆型进度条，效果图如下，由于我的博客园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>