椭圆进度条||饼形图答案

【问题标题】：Oval progress bar || pie chart椭圆进度条||饼形图
【发布时间】：2020-06-24 15:48:47
【问题描述】：

如何仅使用 HTML&CSS 来创建规范的椭圆进度条？

My jsfiddle try 工作但看起来不同（没有内\外边框或填充）

<svg viewBox="0 0 64 64" class="pie">
   <circle class="background" r="25%" cx="50%" cy="50%"></circle>
   <circle class="chart" r="25%" cx="50%" cy="50%" stroke-dasharray="85 100"></circle>
</svg>

【问题讨论】：

看起来不一样是什么意思？
我的变体没有内外边框。
有没有最好的方法来调节没有中风破折号的进度百分比？因为它不能正常工作，例如：jsfiddle.net/sboe73ft

标签： html css progress-bar pie-chart

【解决方案1】：

我不确定这就是你要找的东西，但看起来对吗？

这是我的例子： https://jsfiddle.net/b3h0tqye/57/

我只是更改了以下几行：

<circle class="background" r="27%" cx="50%" cy="50%" style="stroke-width:1;"></circle>
 <circle class="background" r="22%" cx="50%" cy="50%" style="stroke-width:1;"></circle>

【讨论】：