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

原理就是設置stroke-dasharray和stroke-dashoffset一樣大的數值，為圓形的周長