实现圆形环状进度条

Question

<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="transparent" />
  <circle r="50" cx="50" cy="50" fill="transparent" stroke-dasharray="254" stroke-dashoffset="-10" />
</svg>

circle {
  stroke-width: 8px;
  transform-origin: center;
}
circle.progress-background {
  transform: scale(1.9);
  stroke: #fff;
}
circle.progress-bar {
  transform: scale(0.9) rotate(-90deg);
  stroke: rgb(235, 220, 13);
}

在线预览：https://www.wenjiangs.com/runcode?slug=GLMeMgNV

总结

1. 利用SVG 的 Circle 绘制两个圆
2. 相关属性 stroke-dasharray、stroke-dashoffset、stroke-width、stroke