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

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

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

两个clip过的半圆，边框设置颜色，左侧的用来旋转，右侧的固定不动（width：0px），当进度到达50%时，右侧的半圆显示出来（同时左半圆和右半圆的父元素div覆盖最外层的div），左侧的半圆继续旋转。

可能我没说清楚，原文链接： http://blog.csdn.net/angeljsl/article/details/51208960

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

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

常用的path指令:

两个介绍 SVG比较详细的网址

http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html

http://www.mb5u.com/HTML5/html5_96413.html

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

获取range的值就行了，然后将其显示出来，你实时改变range的值，显示的就会实时改变

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function change() {

var value = document.getElementById('range').value

document.getElementById('value').innerHTML = value

}

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

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