前端圆形进度图_实现环形进度条的⼏种⽅法
环形进度条的问题，⽹上有很多的demo，也有各种不同的实现⽅式，很棒的实现也有很多，我这⾃⼰做⼀下⼀⽅⾯是想开阔⼀下⾃⼰的思路，⼀⽅⾯好久没看SVG和Canvas的东西了，基础的拿来熟悉下。
DIV + CSS3
这个是最基本的实现⽅式，我在想怎样⽤尽量少的DOM结构来实现，最终还是⽤了三个div，不过这个⽅法仅供开阔思路，样式表现在PC 还好，⼿机上的问题就多了，仅供参考。
1、利⽤div的border画⼀个背景的圆环
/* css */
.demo1-bg1{
width: 100px;
height: 100px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
margin: 50px auto;
background: fff;
border-radius: 50%;
box-shadow: 0 0 0 10px red inset;
}
2、添加两个⼦元素div，分别设置border来实现两个半圆环并遮盖背景圆环
/* css */
.demo1-bg2-1,.demo1-bg2-2{
position: relative;
margin: 0;
padding: 0;
-webkit-box-flex: 1;
height: 80px;
background: #fff;
border: 10px solid grey;
}
.demo1-bg2-1{
border-radius: 50px 0 0 50px;
border-color: grey transparent grey grey;
transform-origin: 100% 50%;
z-index: 1;
}
.demo1-bg2-2{
border-radius: 0 50px 50px 0;
border-color: grey grey grey transparent;
transform-origin: 0 50%;
z-index: 2;
}
-->  -->
3、⽤JS旋转两个⼦元素，露出背景圆环
SVG
这个原理也很简单，是利⽤SVG的stroke和dash-array属性来实现，也是我常⽤的实现⽅式。
绘制⼀个圆环路径，填充灰⾊圆环
绘制⼀个内圆环，半径/圆⼼和外圆环⼀样，刚好重叠
设置内圆环的stroke-dasharray属性，stroke-dasharray的值得意思是，第⼀个值为圆环第⼀段填充颜⾊的长度，第⼆个值为圆环接下来不填充颜⾊的长度，以此类推并重复。这⾥设置为：stroke-dasharray="0,10000" 第⼀个值就是填充红⾊的值，为0，第⼆段为不填充的长度，超过圆环的周长即可。此时进度条为0%：
这时候发现stroke-dasharray填充是从3点钟位置开始的，所以就让内圆环旋转-90度：
.demo2{
transform-origin: center;
transform: rotate(-90deg);
}svg canvas
JS控制内圆环的stroke-dasharray的值来控制内圆环第⼀段绘制红⾊的长度
var demo2 = document.querySelector("#J_demo2");
var btn1 = document.querySelector("#J_btn_1");
var btn2 = document.querySelector("#J_btn_2");
var circleLength = Math.floor(2 * Math.PI * Attribute("r"));
function rotateCircle () {
var val = parseFloat(btn1.value).toFixed(2);
val = Math.max(0,val);
val = Math.min(100,val);
demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000"); }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。