下面是動畫的代碼:

circle {
  stroke-width: 21;
  stroke-dashoffset: 400;
  stroke: url(#color);
  fill: none;
  animation: stroking 60s linear forwards infinite;
}

@keyframes stroking {
  from {
    stroke-dashoffset: 100%;
  }
  to {
    stroke-dashoffset: 0%;
  }
}

<svg height="500px" width="500px">
  <defs>
    <linearGradient id="color">
      <stop offset="0%" stop-color="#e91e63" />
      <stop offset="100%" stop-color="#673ab7" />
    </linearGradient>
  </defs>
  <circle cx="250px" cy="250px" r="210px" />
</svg>

我發現如果在圓上設置pathlength和stroke-dasharray屬性會更容易控制。因此，設置一個數字來代替百分比。這里我也旋轉了圓，所以它從12點開始。

我不知道CSS動畫對你來說是不是最好的方法。看看我這里的回答:怎樣才能做一個圓形進度條流體？我使用網絡動畫API的地方。

circle {
  stroke-width: 21;
  stroke-dashoffset: 100;
  stroke: url('#color');
  fill: none;
  animation: stroking 6s linear forwards infinite;
}

@keyframes stroking {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg height="500px" width="500px">
  <defs>
    <linearGradient id="color">
      <stop offset="0%" stop-color="#e91e63" />
      <stop offset="100%" stop-color="#673ab7" />
    </linearGradient>
  </defs>
  <circle cx="250px" cy="250px" r="210px" transform="rotate(-90 250 250)"
    stroke-dasharray="100 100" pathLength="100" />
</svg>