记录一下简单的圆形进度条实现，额，上次我做过了，然后又忘记了，所以这次就记录一下吧。
其实也可以使用纯CSS来实现，但是会很复杂，左边一个半圆右边一个半圆，还有一个遮罩。实在是太复杂了，不太适合成年人工作使用。
所以就简单的用一下svg，我没有写百分比那些无关的东西，具体进度指定stroke-dashoffset的值即可。
接下来直接上代码：
具体就是2个svg属性:
- stroke-dasharray
- stroke-dashoffset
stroke-dasharray可以传一个数字，也可以传多个数字（所以这个属性名叫做array），用来控制虚线的长度和间距。
比如stroke-dasharray='5,5'，表示虚线的长度是5，间距也是5。
stroke-dasharray='5,10'，则间距是10。 具体详见mdn。
在这里我把stroke-dasharray，设置为了314。因为我设置的viewbox是100 100，且我把这个圆圈的直径设置为了100（半径 48*2+边宽stroke-width 4），所以圆形边长就是314，stoke-dasharray刚好和圆形的周长相等，完全覆盖圆圈的线条。
stroke-dashoffset属性指定了 dash 模式到路径开始的距离，所以如果是0，就是完全显示，314就是完全不显示。
总之，这两个属性的巧妙使用，就省去了用svg中比较复杂的path元素来绘制。
