如图所示，我们今天要说的就是这种圆形进度条的效果是如何实现的

一、认识SVG矢量图

摘抄自菜鸟教程
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

总结一下: svg就是使用标签绘画出来的矢量图
我们先来画一个简单的 正方形试试

<svg>
  <!--
  rect：绘制正方形的标签，类似的还有circle(我们后面会用到)、line
  width：绘制出来正方形的宽度
  style：fill设置填充颜色
  -->
  <rect width="300" height="100" style="fill:rgb(0,0,255);" />
</svg>
<!--
  我们还可以将style里面的fill改为标签的属性，渲染的结果依旧是一样的
-->
<svg>
  <rect width="300" height="100" fill="rgb(0,0,255)" />
</svg>

运行上面的代码我就可以得到这样一个正方形

二、使用stroke-dasharray属性

stroke-dasharray：设置虚线参数

我们来试试

<svg>
  <!--
  cx：X轴偏移的距离
  cy：Y轴偏移的距离
  r：圆的半径
  stroke-dasharray：可以是一个数组(逗号空格都可以分割)，
  值是虚线的 长度 以及每段 虚线间 间隔的长度：以下面的为例：
  1：第一段虚线为1 ，与第二段间隔也为1
  2：第二段虚线为1 ，与第三段间隔也为1
   ...
  如果数组中的值用完了，但是没有达到圆的周长，那么将继续循环数组中的值
  stroke：边框线的颜色
  stroke-width：边框线的尺寸(通俗来说就是粗细值)
  fill：填充的颜色
   
  -->
  <circle cx="100" cy="50" r="40" stroke-dasharray="1 2 3 4 5"
   stroke="red" stroke-width="1" fill="none" />
</svg>

运行上面的代码得到下面的结果

三、实现进度条

我们知道了stroke-dasharray可以绘制虚线，那么我们来想想怎么实现呢？

我们可以这样想，我们的第一个值用来控制参数的长度，第二个值用来控制间隔，
间隔一直超出了圆一圈，
那么就只会出现第一个值的颜色,然后我们只控制第一个值的长度即可

我们来试试

<!--半径为 40的圆的周长为 251.33-->
<svg>
  <circle cx="100" cy="50" r="40" stroke-dasharray="20 251.33" 
  stroke="red" stroke-width="1" fill="none" />
</svg>

上面代码渲染出来的样子和我们想象的一样，那么我们只需要动态修改stroke-dasharray就可以了

我们尝试用js来动态修改stroke-dasharray

<svg>
  <circle cx="100" cy="50" r="40" stroke-dasharray="20 251.33" 
  stroke="red" stroke-width="1" fill="none" />
</svg>
let circel = document.querySelector('circle')
circel.setAttribute('stroke-dasharray', '50 251.33')

圆的弧线明显边长了

我们加上一个定时器来自动修改

<svg>
  <circle cx="100" cy="50" r="40" stroke-dasharray="20 251.33" stroke="red" stroke-width="1" fill="none" />
</svg>

<script>
  let circel = document.querySelector('circle'),
    count = 0;
  let timer = setInterval(() => {
    circel.setAttribute('stroke-dasharray', `${(++count) / 100 * 251.33} 251.33`)
    // 如果到达 100% 那么就清除定时器
    count === 100 ? clearInterval(timer) : null;
  }, 100)

</script>

我们来看一下上面代码的执行结果

在真实项目中通过真实的百分比来修改即可