求无动画简易HTML&CSS进度条实现代码（附样式参考图）

本人编程水平有限，希望找到一种简单的方法，使用HTML&CSS制作如图所示的进度条（无需动画效果）。
恳请各位提供实现代码？
感谢！Mags

这里提供一个结构简洁、容易修改的纯HTML&CSS进度条实现，完全满足无动画的需求：

代码实现 #

HTML 结构 #

<div class="progress-box">
  <!-- 进度填充条 -->
  <div class="progress-content" style="width: 60%"></div>
  <!-- 刻度标记 -->
  <div class="progress-ticks">
    <span>0%</span>
    <span>25%</span>
    <span>50%</span>
    <span>75%</span>
    <span>100%</span>
  </div>
</div>

CSS 样式 #

/* 进度条容器 */
.progress-box {
  width: 320px; /* 可自定义宽度 */
  height: 20px;
  background-color: #e5e5e5;
  border-radius: 10px;
  position: relative;
  margin-top: 35px; /* 给刻度留出空间 */
}

/* 进度填充部分 */
.progress-content {
  height: 100%;
  background-color: #4CAF50; /* 可替换成你需要的进度颜色 */
  border-radius: 10px;
}

/* 刻度标记样式 */
.progress-ticks {
  position: absolute;
  bottom: -26px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

自定义说明 #

• 调整 .progress-box 的 width 属性可以改变进度条整体宽度
• 修改 .progress-content 的 background-color 就能更换进度填充的颜色
• 进度百分比直接通过 style="width: 60%" 设置，改成你需要的数值即可
• 刻度标记可以根据需求增减或修改文字内容

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