如何创建自定义 CSS 进度条

Question

我需要帮助在 HTML5 中创建附加控件。

1. 它需要随着所在页面的变化而适当调整大小。
2. 需要随着进度的变化改变圆圈颜色的能力。
3. 需要随着进度的变化而改变桥梁颜色的能力。

我尝试了以下方法，但似乎效果不佳。很难设置元素以匹配编号圆圈的位置。圆圈的定位也很难维护。

<div class="row" style="margin-top: 15px; margin-bottom: 15px;">
     <div class="col-md-12">
        <svg height="24" width="24" style="float: left!important;">
            <circle cx="12" cy="12" r="10" stroke="black" stroke-width="3" fill="blue" />
            <text x="9" y="9" fill="white">1</text>
        </svg>
        <svg height="24" width="24" style="float: left!important; margin-left: 25%">
            <circle cx="12" cy="12" r="10" stroke="white" stroke-width="3" fill="white" />
            <text x="9" y="9" fill="black">2</text>
        </svg>
        <svg height="24" width="24" style="float: left!important; margin-left: 25%">
            <circle cx="12" cy="12" r="10" stroke="white" stroke-width="3" fill="white" />
            <text x="9" y="9" fill="black">3</text>
        </svg>
        <svg height="24" width="24" style="float: left!important; margin-left: 25%">
            <circle cx="12" cy="12" r="10" stroke="white" stroke-width="3" fill="white" />
            <text x="9" y="9" fill="black">4</text>
        </svg>
        <svg height="24" width="24" style="float: right!important;">
            <circle cx="12" cy="12" r="10" stroke="white" stroke-width="3" fill="white" />
            <text x="9" y="9" fill="black">5</text>
        </svg>
        <progress value="20" max="100" style="width: 100%; height: 24px; display:block;" />
    </div>
</div>

Answer 1

通过下面的例子，你会得到一个漂亮的进度步进组件，同时它很容易定制。连接不同步骤的线表示为 ::before 和 ::after 伪元素。 请记住，如果您决定缩放包含步骤的元素，您还应该更改伪元素的顶部值。另外，如果你想在完成时改变进度颜色，你可以参考这个例子

.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.completed .step-counter {
  background-color: #4bb543;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #4bb543;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

<div class="stepper-wrapper">
  <div class="stepper-item completed">
    <div class="step-counter">1</div>
    <div class="step-name">Welcome</div>
  </div>
  <div class="stepper-item completed">
    <div class="step-counter">2</div>
    <div class="step-name">Property Details</div>
  </div>
  <div class="stepper-item active">
    <div class="step-counter">3</div>
    <div class="step-name">Coverage Info</div>
  </div>
  <div class="stepper-item">
    <div class="step-counter">4</div>
    <div class="step-name">Discounts</div>
  </div>
  <div class="stepper-item">
    <div class="step-counter">5</div>
    <div class="step-name">Get Quote</div>
  </div>
</div>