利用 clip-path 实现环形进度条

  昨天逛网页时看到有用css与js实现环形进度条的(那位博主在面试时被要求当场写出环形进度条π_π),然后就想尝试下写出来(感觉好尴尬),说实话春节后遗症真可怕 haha~

  看了网上的三种方法实现方式如下:

  • DIV旋转

  两个clip过的半圆,边框设置颜色,左侧的用来旋转,右侧的固定不动(width:0px;),当进度到达50%时, 右侧的半圆显示出来(同时左半圆和右半圆的父元素div覆盖最外层的div),左侧的半圆继续旋转 。
  可能我没说清楚,原文链接:http://blog.csdn.net/angeljsl/article/details/51208960

  • SVG提供的一个范围广泛stroke 属性

  使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果,原文链接:http://www.zhangxinxu.com/wordpress/?p=4889

  • SVG中的path进行绘制

  利用path元素,使用path指令绘制扇形,原文链接:http://www.tuicool.com/articles/e2UzuaQ

  常用的path指令:

    M = moveto(M X,Y) :将画笔移动到指定的坐标位置
    
    L = lineto(L X,Y) :画直线到指定的坐标位置
    
    H = horizontal lineto(H X):画水平线到指定的X坐标位置
    
    V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
    
    A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
    
    Z = closepath():关闭路径

两个介绍 SVG比较详细的网址
  http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html
  http://www.mb5u.com/HTML5/html5_96413.html

下面本人使用CSS3中的clip-path属性实现的效果

www.jianshu.com/u/7814fc84433b.png
www.jianshu.com.png

  核心就是使用-webkit-clip-path:polygon();切割div,border-radius:50%;画出圆弧

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="{CHARSET}">
    <title>利用 clip-path 实现环形进度条</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #circle,.test1{
            width:200px;
            height:200px;
            border-radius:50%;                                          
        }
        #circle{
            background-color:#ccc;
            text-align:center;
            position:relative;
            left:50px;
            top:50px;
        }
        .test2{
            background-color:blue;
            /*position: absolute;*/
            /*clip: rect(0px,200px,200px,100px);*/
            /*-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,30% 0%);*/
        }
        .circle-ban{
            width:170px;
            height:170px;
            border-radius:50%;
            background-color:white; 
            position:absolute;
            top:15px;       
            left:15px;
        }
        .circle-ban p{margin-top:76px;}         
    </style>
</head>
<body>
    <div id="circle">
        <div class="test1"></div>
        <div class="circle-ban">
            <p><span class="mask">0</span>%</p>
        </div>
    </div>      
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function press(r){
            /* 百分比与角度的关系
             * 100%对应360度->1%=3.6deg
             * 角度与周长的关系
             * 360度对应长度为800->0.45deg=1px
             * 百分比与周长的关系
             * 100%对应周长800->0.125%=1px           
             * ----->1%=8px
             * 45deg=100px(角度对应的周长)=50%(clip-path中的百分比)
             * ------->100%(百分比值)=400%(clip-path中的百分比)
             */

            var r=r*4;
            var div=$(".test1");
            div.addClass("test2");
            var k1="polygon(50% 50%,50% 0%,";
            var k2=k1+"100% 0%,";
            var k3=k2+"100% 100%,";
            var k4=k3+"0% 100%,";
            var k5=k4+"0% 0%,";
            if(r<=50){
                r+=50;
                div.css({"-webkit-clip-path":k1+r+"% 0%)"});                    
            }else if((r>50)&&(r<=150)){
                r-=50;
                div.css({"-webkit-clip-path":k2+"100% "+r+"%)"});
            }else if((r>150)&&(r<=250)){
                r=250-r;
                div.css({"-webkit-clip-path":k3+r+"% 100%)"});
            }else if((r>250)&&(r<=350)){
                r=350-r;
                div.css({"-webkit-clip-path":k4+"0% "+r+"%)"});
            }else if((r>350)&&(r<=400)){
                r-=350;
                div.css({"-webkit-clip-path":k5+r+"% 0%)"});
            }
        }           
        var n=0;
        var timer=setInterval((function(){
            n++;
            if(n==100){clearInterval(timer);timer=null;}                
            $(".mask").text(n);
            press(n);
        }),100);

    </script>
</body>
</html>

推荐阅读更多精彩内容

  • 当你指责“趋势”没有尽到朋友的义务时,请先问问自己,是否真的拿“趋势”当朋友了? ——金融帝国 “趋势是你的朋友”...
    Julien_竹先生阅读 189评论 0 15
  • 终有一天,当我和你面对面时。 我可以望着你的眼眸, 用静默的笑意对你诉说: 谢谢你,成就了我的无所眷恋。 谢谢你,...
    Lucky感谢爱阅读 78评论 0 6
  • 从小到大我都觉得自己是一个内向但又不太内向的人,我喜欢有独处的空间,在陌生人面前比较腼腆,但在熟人面前,我可以很疯...
    卓安安阅读 93评论 8 4
  • 有点起不来床,订闹钟是八点起,还在做梦,梦见上生物课,班级一共就带我四个人,有三个同学坐后排的位子,我在门口徘徊要...
    悠哉轻创联盟阅读 66评论 0 0