SOURCE

<!-- 
    stroke-dasharray 形成半缺圆
    value:它可以定义在动画过程中使用的值序列，或者它是颜色矩阵的数字列表，根据颜色类型的不同，它们的解释也不同
 -->
<div>
    <svg width="400" height="400" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
        <circle cx="200" cy="200" r="100" fill="none" stroke="#3be6cb" stroke-width="20"
        stroke-dasharray="157" stroke-linecap="round">
            <animateTransform attributeName="transform"
                type="rotate"
                from="0 200 200"
                to="360 200 200"
                dur="2s"
                repeatCount="indefinite"
            ></animateTransform>
            <animate attributeName="stroke"
                values="#02bcfe;#3be6cb;#02bcfe"
                dur="2s"
                repeatCount="indefinite"
            ></animate>
        </circle>
        <circle cx="200" cy="200" r="50" fill="none" stroke="#02bcfe" stroke-width="20"
        stroke-dasharray="80" stroke-linecap="round">
            <animateTransform attributeName="transform"
             type="rotate"
             from="360 200 200"
             to="0 200 200"
             dur="2s"
             repeatCount="indefinite"></animateTransform>
             <animate attributeName="stroke"
                values="#3be6cb;#02bcfe;#3be6cb"
                dur="2s"
                repeatCount="indefinite"
            ></animate>
        </circle>
    </svg>
</div>

svg {
    border: 1px solid gray;
}