椭圆进度条 ||饼形图

Question

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

My jsfiddle try 有效但看起来不同（没有 inside\outside 边框或填充）

<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>

Answer 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>

椭圆进度条 ||饼形图

Oval progress bar || pie chart

html

css

pie-chart

progress-bar