今天我们来制作一个简易进度条吧！
废话不多说先看图吧!
注释（我这里就只用圆形举个例子，那种直线的是和这种99%都是一样的，那种还简单一点。）
一、html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>进度条</title>
<meta charset="UTF-8">
</head>
<body>
<svg> <!--svg动画-->
<circle cx="50%" cy="50%" r="100px" ></circle> <!--画两个圆 -->
<circle cx="50%" cy="50%" r="100px" ></circle>
</svg>
<div>0%</div>
</body>
</html>
看不懂你就这样理解,svg这个标签是一块画布或者一张纸，circle单词就是圆，那不就很好理解了，就是我们在一张纸上面画了两个圆。画了两个圆之后，我们又不知道要画多大，cx c就是圆 x就是x轴 我这里的 50% 是在屏幕50%的地方画圆，
那么我们知道参数了,在圆x轴在屏幕中心，y轴也是 ，r是半径，为100像素。
我画两个圆是为了一个当背景，一个当作当前进度。
你们应该看到的是这样的。圆没有显示完全是应为画布小了。就像你在纸上面画圆，你偏偏要画一个比纸还要大的圆，当然就显示不出来啊。
二、css代码
*{
margin:0;
padding:0;
}
body{
height:100vh;
}
svg{
width: 100%;
height: 100%;
}
div{ /*让文字居中*/
position:absolute;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
left:50%;
top:50%;
font-size: 2em;
transform: translate(-50%,-50%);
}
circle{ /*圆的通用设置*/
fill:none; /*填充颜色为无*/
stroke: black; /*笔触颜色*/
stroke-width: 4px; /*笔触宽度*/
}
circle:last-of-type{ /*伪选择器最后一个圆*/
stroke-width: 5px;
stroke: green;
stroke-dashoffset: 628px; /*笔触偏移*/
stroke-dasharray: 628px; /*笔触间距*/
}
我们需要注意的就只有笔触偏移与笔触间距这两个属性很重要
stroke-dashoffset这个比较好理解，就是让你画好的线条距离起点位置偏移，我这里是偏移圆周长的距离。等下让0%到100%还需要用到这个属性看完你就明白了。
stroke-dasharray:5px
看到下面这张图，我相信聪慧的你们一下子就看明白了吧，每次他就是虚线之间的间距，你就这样想把他的线条改为虚线，并且间距为5个像素，
stroke-dasharray:5px 10px
我还是相信聪慧的你们看明白了，没错就是，5px是线段长度，10px是线段间距，当然他的参数还可以有三个，但是换汤不换药，还是先线段长度，间距长度，线段长度。就是这样。
我们先来一个动画让他动起来
circle:last-of-type{
animation: name1 5s linear forwards;
}
@keyframes name1{
to{
stroke-dashoffset: 0; /*偏移从周长到0*/
}
}
看明白了没，从偏移圆的最大周长到不偏移，就可以形成从0到100的过程了
好了效果有了。
三、js代码
var cir=document.querySelector("circle:last-of-type");
var leg=Math.ceil(cir.getTotalLength()); //就当成获得圆的周长
//在js中结算，这样是最准确的
cir.style.strokeDasharray=leg+1; //+1是为了避免最后有一点没有闭合
cir.style.strokeDashoffset=leg; //js设置偏移
var index=0;
var timeout=setInterval(()=>{
index++;
//下面这一条等于每秒减去周长的1%
cir.style.strokeDashoffset=leg-(index*leg/100);
document.querySelector('div').innerHTML=index+"%" //值传给div
if(index>=100){ //清楚定时器节省资源
clearInterval(timeout);
}
},100) //延迟
四、完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin:0;
padding:0;
}
body{
height:100vh;
}
svg{
width: 100%;
height: 100%;
}
div{
position:absolute; /*让文字居中*/
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
left:50%;
top:50%;
font-size: 2em;
transform: translate(-50%,-50%);
}
circle{ /*圆的通用设置*/
fill:none; /*填充颜色*/
stroke: black; /*笔触颜色*/
stroke-width: 4px; /*笔触宽度*/
}
circle:last-of-type{ /*伪选择器最后一个圆*/
stroke-width: 6px;
stroke: green;
/* stroke-dashoffset: 628px; 笔触偏移 */
/* stroke-dasharray: 628px; 笔触间距 */
/* animation: name1 5s linear forwards ; */
}
@keyframes name1{
to{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg> <!--svg动画-->
<circle cx="50%" cy="50%" r="100px" ></circle> <!--画两个圆 -->
<circle cx="50%" cy="50%" r="100px" ></circle>
</svg>
<div>0%</div>
</body>
<script>
var cir=document.querySelector("circle:last-of-type");
var leg=Math.ceil(cir.getTotalLength());
cir.style.strokeDasharray=leg+1; //+1是为了避免最后有一点没有闭合
cir.style.strokeDashoffset=leg; //js中设置偏移
var index=0; //当前百分比
var timeout=setInterval(()=>{
index++;
//这里等于每秒减去周长的百分之一
cir.style.strokeDashoffset=leg-(index*leg/100);
document.querySelector('div').innerHTML=index+"%" //显示当前百分比
if(index>=100){ //清除定时器节省资源
clearInterval(timeout);
}
},100) //延迟
</script>
</html>
五、总结
我没有做的那么花哨，如果做复杂了就比较难懂了。那么直线型的这么做了，其实你直接把圆换成一个长方形，还是一样，两个重叠再一次，然后还是stroke-dashoffset从最长到0的距离，这里要用line来画，<line x1=“0” y1=“0” x2=“200” y2=“200”>
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
