如何创建自定义CSS进度条

k5ifujac 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(147)

enter image description here
我需要在HTML5中创建附加控件的帮助。
1.当它所在的页面发生变化时，它需要正确地调整大小。
1.需要的能力，改变颜色的圆圈作为进展的变化。
1.需要的能力，改变颜色的桥梁，因为进展的变化。
我尝试了下面的方法，但似乎效果不佳。很难设置元素来匹配编号圆圈的位置。而且圆圈的定位也很难维护。

<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>

css

来源：https://stackoverflow.com/questions/75700892/how-to-create-a-custom-css-progress-bar

1条答案

按热度按时间

72qzrwbm1#

通过下面的例子，你可以得到一个漂亮的进度步进器组件，它可以很容易地同时定制。连接不同步骤的线表示为：：before和：：after伪元素。记住，如果你决定缩放包含步骤的元素，你也应该改变伪元素的顶部值。同样，如果你想在完成时改变进度颜色，你可以引用this example。

.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>

赞(0）回复(0）举报 2023-03-14

我来回答

如何创建自定义CSS进度条

1条答案

相关问题

热门标签

最新问答