先看效果图 25%的环形进度
image.png
利用 SVG circle 实现环形进度条
1.cx 和 cy 属性定义圆点的 x 和 y 坐标
2.r 属性定义圆的半径
3.stroke-width属性指定了圆的轮廓宽度
4.stroke-dasharray用于创建虚线，之所以后面跟的是array的，是因为值其实是数组,一个参数时： 其实是表示虚线长度和每段虚线之间的间距,两个参数或者多个参数时：一个表示长度，一个表示间距
如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复 虚线长10，间距10
如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复 虚线长10，间距5
如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
实现思路就是：
1：一个circle当做背景圆
1：另外一个圆设置进度stroke-dasharray虚线长度等于或者小于当前圆的周长
circle.gif
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<circle fill="transparent" class="pie-bg" stroke-width="1" cx="25" cy="25" r="20"></circle>
<circle fill="transparent" class="pie-bar" stroke-width="1" cx="25" cy="25" r="20"
style="stroke-dasharray: 12.5664, 125.664;"></circle>
</svg>
svg {
vertical-align: middle;
width: 150px;
height: 150px;
}
.pie-bg {
stroke: #ff3300;
opacity: .3;
}
.pie-bar {
stroke: #ff3300;
}
circle {
stroke-dashoffset: 0;
transform: rotate(-90deg);
transform-origin: center;
transition: all .2s;
stroke: currentColor;
z-index: 2;
}
js动态控制进度
var pieBar = document.querySelector('.pie-bar');
var pathLen = 40 * Math.PI;//圆的周长
var percent = 25;//占百分比
pieBar.style.strokeDasharray = pathLen * percent / 100 + " " + pathLen;
