要在 HTML 中创建圆形进度条，可以使用 SVG（可缩放矢量图形）和 CSS 的组合。下面是一个简单的示例代码：
<svg>
<circle cx="50%" cy="50%" r="40%" stroke="#ccc" stroke-width="10%" fill="none" />
<circle cx="50%" cy="50%" r="40%" stroke="#f00" stroke-width="10%" fill="none" stroke-dasharray="251.2" stroke-dashoffset="188.4" transform="rotate(-90 50 50)" />
</svg>其中，第一个圆形元素是用来绘制进度条的背景，它的颜色为灰色（#ccc），线宽为 10%（stroke-width="10%"），半径为画布宽度或高度的 40%（r="40%"），填充颜色为透明（fill="none"）。
第二个圆形元素是用来绘制进度条的前景，它的颜色为红色（#f00），线宽为 10%（stroke-width="10%"），半径为画布宽度或高度的 40%（r="40%"），填充颜色为透明（fill="none"）。此外，它还添加了两个属性来控制进度条的进度：
stroke-dasharray 属性用于指定虚线的长度，这里设置为圆的周长（2 * Math.PI * r）。stroke-dashoffset 属性用于指定虚线的起点位置，这里设置为周长的 75%（0.75 * 2 * Math.PI * r）。最后，通过 transform 属性旋转圆形元素，使进度条从顶部开始绘制。
需要注意的是，这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整。
