将Bootstrap加载样式进度条修改为点状进度条

Bootstrap确实没有原生的点状进度组件，我们可以基于Bootstrap工具类+自定义CSS来实现，完全匹配你要的步骤圆点样式：

完整代码示例 #

HTML结构 #

<!-- 点状进度条容器 -->
<div class="d-flex justify-content-between align-items-center step-progress-container">
  <!-- 步骤1：已完成 -->
  <div class="step-item completed">
    <div class="step-dot">1</div>
    <span class="step-label mt-1">基本信息</span>
  </div>
  <!-- 步骤2：当前步骤 -->
  <div class="step-item active">
    <div class="step-dot">2</div>
    <span class="step-label mt-1">偏好设置</span>
  </div>
  <!-- 步骤3：未完成 -->
  <div class="step-item pending">
    <div class="step-dot">3</div>
    <span class="step-label mt-1">内容选择</span>
  </div>
  <!-- 步骤4：未完成 -->
  <div class="step-item pending">
    <div class="step-dot">4</div>
    <span class="step-label mt-1">提交确认</span>
  </div>
</div>

自定义CSS #

/* 进度条容器，添加步骤间连接线 */
.step-progress-container {
  position: relative;
}
.step-progress-container::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #e9ecef; /* Bootstrap默认浅灰 */
  z-index: 0;
}

/* 步骤项，相对定位覆盖连接线 */
.step-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%; /* 4个步骤，每个占25% */
}

/* 圆点基础样式 */
.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border: 2px solid;
}

/* 已完成状态 */
.step-item.completed .step-dot {
  background-color: #0d6efd; /* Bootstrap primary蓝 */
  border-color: #0d6efd;
  color: white;
}

/* 当前步骤状态 */
.step-item.active .step-dot {
  background-color: white;
  border-color: #0d6efd;
  color: #0d6efd;
}

/* 未完成状态 */
.step-item.pending .step-dot {
  background-color: white;
  border-color: #e9ecef;
  color: #6c757d; /* Bootstrap secondary灰 */
}

/* 步骤标签样式（可选） */
.step-label {
  font-size: 12px;
  color: #6c757d;
}
.step-item.completed .step-label,
.step-item.active .step-label {
  color: #0d6efd;
  font-weight: 500;
}

使用说明 #

1. 步骤数量可按需调整，修改.step-item的width即可（比如3个步骤设为33.33%）
2. 切换进度只需给对应.step-item添加/移除completed、active、pending类
3. 配色完全沿用Bootstrap主题色，也可替换为success绿、warning黄等其他Bootstrap颜色类

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