Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

stroke-dasharray：定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数

stroke-dashoffset：定义虚线描边的偏移量（在路径开始的前面，看不到）

实现如下所示

svg{ transform:rotate(-90deg); } 
@keyframes rt{
     to{
        stroke-dashoffset:0;
    } 
}


<circle class="a" cx="300" cy="300" r="150" style="fill:transparent;stroke:#000;stroke-3px;" />
<circle class="a" cx="300" cy="300" r="150" style="fill:transparent;stroke:red;stroke-4px;stroke-dasharray:942.4777px; stroke-dashoffset:942.4777px; animation:rt 2s ease-in both " />

原理就是设置stroke-dasharray和stroke-dashoffset一样大的数值，为圆形的周长