如何实现适配4步表单的圆形进度步骤指示器？

因为你只需要固定4个状态，不需要适配任意百分比的进度，完全可以跳过通用圆形进度条的复杂嵌套实现，以下两种方案都只需要少量代码就能实现需求：

方案1：单DIV纯CSS实现（推荐） #

实现原理 #

利用CSS圆锥渐变直接生成对应比例的进度环，配合伪元素实现内部留白效果，整个组件仅需1个DOM元素。

代码示例 #

HTML部分

<!-- 分别对应4个步骤，切换时仅需修改step-x类即可 -->
<div class="step-circle step-1">1</div>
<!-- <div class="step-circle step-2">2</div>
<div class="step-circle step-3">3</div>
<div class="step-circle step-4">4</div> -->

CSS部分

.step-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  color: #1677ff; /* 数字颜色可自定义 */
}
/* 内部白色遮罩，形成环形进度效果 */
.step-circle::after {
  content: "";
  position: absolute;
  inset: 6px; /* 这个值控制进度环的宽度，数值越大环越细 */
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
}
/* 4个步骤对应的渐变样式，颜色可自定义 */
.step-1 {
  background: conic-gradient(#1677ff 25%, #e5e7eb 0);
}
.step-2 {
  background: conic-gradient(#1677ff 50%, #e5e7eb 0);
}
.step-3 {
  background: conic-gradient(#1677ff 75%, #e5e7eb 0);
}
.step-4 {
  background: conic-gradient(#1677ff 100%, #e5e7eb 0);
}

方案2：静态SVG实现（兼容性更好） #

如果需要兼容不支持conic-gradient的旧浏览器，可以直接用4个固定的SVG片段，需要对应步骤时直接插入即可，不需要依赖任何CSS：

<!-- 步骤1的SVG示例 -->
<svg width="60" height="60" viewBox="0 0 60 60">
  <!-- 背景灰环 -->
  <circle cx="30" cy="30" r="24" fill="none" stroke="#e5e7eb" stroke-width="6"/>
  <!-- 进度蓝环 -->
  <circle cx="30" cy="30" r="24" fill="none" stroke="#1677ff" stroke-width="6"
          stroke-dasharray="150.72" stroke-dashoffset="113.04" transform="rotate(-90 30 30)"/>
  <!-- 中间数字 -->
  <text x="30" y="35" text-anchor="middle" font-size="18" font-weight="bold">1</text>
</svg>

其他步骤仅需要修改stroke-dashoffset属性值即可：

• 步骤2（50%进度）：stroke-dashoffset="75.36"
• 步骤3（75%进度）：stroke-dashoffset="37.68"
• 步骤4（100%进度）：stroke-dashoffset="0"

两种方案的大小、颜色、环宽都可以根据你的设计需求自由调整参数。

内容的提问来源于stack exchange，提问作者Tushar