css SVG环形进度条 - 3。

Posted 2021-05-13

 /* 
  * circle 描边的 start point 在 circle 在 3 点钟方向
  * 这里使用 rotate，逆时针旋转 90 度使 start point 定位到 12 点方向
  */
.contain svg {
  transform: rotate(-90deg);
}

/*
 * 为了演示，默认 circle 的 stroke-dashoffset 为 1000
 * 同时配合 keyframe 和 animation 来掩饰
 */
.path {
  stroke-dashoffset: 1000;
  animation: run 3s infinite linear;
}
@keyframes run {
  to { stroke-dashoffset: 0; }
}