利用 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%;画出圆弧

直接上代码

    
    
    


    

        

        

            
0%