Step by step！css3、svg 画圆形渐变圆角进度条

css3

首先摆上那个灰色的圈

然后盖上一个蓝色的半圈（由一半的蓝色和一半的透明border组成）

让它转起来

这就像进度为百分之五十的时候的样子

把右边给他遮住，这样他还没到百分之五十的时候，右边不会出现这个半圆的一个部分

动起来是这样的

左边.gif

然后右边我们如法炮制一个，这样整个圆就实现了

完整效果

最终

!!
但是这个效果和最终设想的差别有比较大的距离。如果使用这个方案是做不出渐变色和圆角的效果的。

svg

只要去学习一下svg的圆和渐变，就能很容易地做出来这个效果。
所以在这里简单说一下动画的原理。
在circle标签上支持两个属性，stroke-dashoffset和stroke-dasharray。

stroke-dashoffset 属性指定了dash模式到路径开始的距离
如果使用了一个 <百分比> 值， 那么这个值就代表了当前viewport的一个百分比。
属性stroke-dasharray可控制用来描边的点划线的图案范式。
作为一个外观属性，它也可以直接用作一个CSS样式表内部的属性。

噫，老实说没看懂这两个参数到底是干啥的。动手试一下这两个属性。

控制变量法：

1. 我的圆周长大约为314。
   此时设置

    stroke-dashoffset: 0;
    stroke-dasharray: 314;

则圆为这样

2. 设置

    stroke-dashoffset: 0;
    stroke-dasharray: 298;

合理地猜测，stroke-dasharray的改变可以变更轨迹的样子。
其实如果把这个值变小，这个外围就是虚线，所以仅仅靠变更这个值去实现连续的蓝色弧线是行不通的。

3. 变更stroke-dashoffset

    stroke-dashoffset: 314;
    stroke-dasharray: 314;

如果这两值相等，则蓝色的部分就消失了。

    stroke-dashoffset: 100;
    stroke-dasharray: 314;

终上所述，设置 stroke-dasharray为圆周长，让stroke-dashoffset从大到小变化，则动画就会从缺到完整那么去动。

我这里设置了最终为有缺口的99%状态，效果及源码如下：

最终效果

完整代码如下

// progressBar.vue

// 使用