求助：如何实现符合设计稿的带步骤进度条样式

针对你遇到的三个进度条样式问题（文本无法移出圆形、嵌套圆点实现、完成步骤显示对勾），以下是对应修改方案：

1. 将文本移至圆形指示器下方 #

原结构把步骤数字放在圆形内部，需要拆分结构，给每个步骤添加独立的指示器和文本标签，通过Flex布局实现垂直排列：

修改后的HTML步骤项：

<li class="step active"><span class="indicator"></span><span class="label">1</span></li>

对应CSS调整：

#progress-text .step {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

#progress-text .step .indicator {
  border: 3px solid lightgray;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#progress-text .step .label {
  font-family: sans-serif;
  font-size: 14px;
}

2. 创建不可点击的嵌套圆形点 #

给未激活的指示器添加内部圆点，用伪元素实现，同时禁用步骤的点击交互：

#progress-text .step:not(.active) .indicator::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: lightgray;
}

/* 完全禁用步骤点击 */
#progress-text .step {
  pointer-events: none;
}

3. 已激活/完成步骤显示对勾图标 #

给激活状态的指示器添加Unicode对勾符号，同时调整背景和边框色：

#progress-text .step.active .indicator {
  border-color: #4584ff;
  background: #4584ff;
}

#progress-text .step.active .indicator::before {
  content: "\2713";
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

4. 调整进度条位置适配新布局 #

原进度条基于父元素50%高度定位，现在改为对齐指示器中心：

#progress-bar, #progress-text::before {
  top: 12.5px; /* 指示器高度25px的一半 */
}

完整代码示例 #

HTML #

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>进度条示例</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div id="progress">
    <div id="progress-bar"></div>
    <ul id="progress-text">
      <li class="step active"><span class="indicator"></span><span class="label">1</span></li>
      <li class="step"><span class="indicator"></span><span class="label">2</span></li>
      <li class="step"><span class="indicator"></span><span class="label">3</span></li>
      <li class="step"><span class="indicator"></span><span class="label">4</span></li>
      <li class="step"><span class="indicator"></span><span class="label">5</span></li>
    </ul>
  </div>
  <button id="progress-prev" class="btn" disabled>上一步</button>
  <button id="progress-next" class="btn">下一步</button>
  <script src="./bar script.js"></script>
</body>
</html>

CSS #

#progress {
  position: relative;
  margin-bottom: 30px;
  padding: 0 10px;
}

#progress-bar {
  position: absolute;
  background: #4584ff;
  height: 5px;
  width: 0%;
  top: 12.5px;
  left: 0;
  transition: width 0.3s ease;
}

#progress-text {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

#progress-text::before {
  content: "";
  background: lightgray;
  position: absolute;
  top: 12.5px;
  left: 0;
  height: 5px;
  width: 100%;
  z-index: -1;
}

#progress-text .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

#progress-text .step .indicator {
  border: 3px solid lightgray;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#progress-text .step .label {
  font-family: sans-serif;
  font-size: 14px;
}

#progress-text .step:not(.active) .indicator::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: lightgray;
}

#progress-text .step.active .indicator {
  border-color: #4584ff;
  background: #4584ff;
}

#progress-text .step.active .indicator::before {
  content: "\2713";
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.btn {
  background: lightgray;
  border: none;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

补充JS逻辑（确保进度条正常更新） #

如果原有JS未正确计算进度，可使用以下代码：

const progressBar = document.getElementById('progress-bar');
const steps = document.querySelectorAll('#progress-text .step');
const prevBtn = document.getElementById('progress-prev');
const nextBtn = document.getElementById('progress-next');
let currentStep = 0;

function updateProgress() {
  steps.forEach((step, idx) => {
    step.classList.toggle('active', idx <= currentStep);
  });
  progressBar.style.width = `${(currentStep / (steps.length - 1)) * 100}%`;
  prevBtn.disabled = currentStep === 0;
  nextBtn.disabled = currentStep === steps.length - 1;
}

prevBtn.addEventListener('click', () => currentStep > 0 && (currentStep--, updateProgress()));
nextBtn.addEventListener('click', () => currentStep < steps.length - 1 && (currentStep++, updateProgress()));

updateProgress();

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