使用 css - 圆形进度条逐步创建和填充圆弧

Question

我正在努力填充像进度条一样的弧线，因为我不太擅长使用 css。

我想实现这样的“进度”弧：

我遇到了这个： https: //codepen.io/enslavedeagle/pen/AXzaKE

#arc,
#arc::before {
  display: block;
  box-sizing: border-box;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

#arc {
  border: solid #00BBEE 12px;
  clip: rect(0px, 100px, 50px, 0px);
  margin: 25px;
}

#arc::before {
  content: '';
  border: solid black 12px;
  top: -12px;
  left: -12px;
  clip: rect(0px, 100px, 50px, 0px);
  transform: rotate(-150deg);
  /* define the fill length, using the rotation above.
     from -180deg (0% fill) to 0deg (100% fill) */
  /* if you have a better solution to make thing like this 
     work, please let me know! :) */
}

并尝试自定义为我想要的样子，但到目前为止还没有成功：这里： https: //codepen.io/anon/pen/qpNrEP

有人可以提供一些帮助吗？也可以通过替代解决方案来实现这一目标。

我很欣赏

亲切的问候，

Answer 1

您可以使用两个圆弧重叠的 SVG，然后使用stroke-dash-array.

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

path.grey {
  stroke: lightgrey;
}

path.purple {
  stroke: purple;
  stroke-dasharray: calc(40 * 3.142 * 1.85);
  stroke-dashoffset: 20;
  /* adjust last number for variance */
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
    <path class="grey" d="M40,90
             A40,40 0 1,1 60,90"
          style="fill:none;"/>
    <path class="purple" d="M40,90
             A40,40 0 1,1 60,90"
          style="fill:none;"/>
</svg>