如何在 css 中使用此设计逐步创建进度？答案

【问题标题】：How create progress step by step with this design in css?如何在 css 中使用此设计逐步创建进度？
【发布时间】：2020-08-19 18:57:06
【问题描述】：

我需要像css中的图像示例那样逐步创建进度条，

在这一刻我有这个，我为圆圈和条形设计了背景，你能给我看一个 css 的例子吗？

谢谢你的帮助

【问题讨论】：

@RayeesAC 它是关于样式的 ;) 边框和阴影
可以添加最新的代码来试用吗？

标签： css progress-bar

【解决方案1】：

非常简单的例子：

//stepper plugin
(function($) {
  const defaultStepperSettings = {
    progressStepShapeHighlightedColor: '#0275d8',
    progressStepShapeDefaultColor: '#bbb',
  }
  $.fn.stepper = function(settings = defaultStepperSettings) {
    this.settings = settings;
    this.stepIndex = 0;
    this.next = function() {
      $(this
        .find('.progress-step')[this.stepIndex++])
        .find('.progress-step-circle, .progress-step-square')
        .css('background-color', this.settings.progressStepShapeHighlightedColor);
      return this;
    }
    this.prev = function() {
      $(this
        .find('.progress-step')[--this.stepIndex])
        .find('.progress-step-circle, .progress-step-square')
        .css('background-color', this.settings.progressStepShapeDefaultColor);
      return this;
    }
    return this;
  }
}(jQuery));

$(() => {
  $('.progress-stepper')
    .stepper()
    .next()
    .next()
    .next()
    .next()
    .prev();
});

.progress-stepper {
  width: 100%;
  height: 100%;
}

.progress-step {
  text-align: center;
  display: inline-block;
  min-width: 60px;
}

.line {
  width: 40px;
  border-bottom: 1px solid #ddd;
  display: inline-block;
  margin-bottom: 20px;
}

.progress-step-circle {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
}

.progress-step-square {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  color: #fff;
  display: inline-block;
}

.progress-step-label {
  text-transform: capitalize;
  color: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>

  <head>
    <title>Homebrew-Stepper</title>
  </head>

  <body>
    <div class="progress-stepper">
      <div class="progress-step">
        <div class="progress-step-circle">
          1
        </div>
        <div class="progress-step-label">
          step 1
        </div>
      </div>
      <div class="line"></div>
      <div class="progress-step">
        <div class="progress-step-circle">
          2
        </div>
        <div class="progress-step-label">
          step 2
        </div>
      </div>
      <div class="line"></div>
      <div class="progress-step">
        <div class="progress-step-circle">
          3
        </div>
        <div class="progress-step-label">
          step 3
        </div>
      </div>
      <div class="line"></div>
      <div class="progress-step">
        <div class="progress-step-circle">
          4
        </div>
        <div class="progress-step-label">
          step 4
        </div>
      </div>
      <div class="line"></div>
      <div class="progress-step">
        <div class="progress-step-circle">
          5
        </div>
        <div class="progress-step-label">
          step 5
        </div>
      </div>
      <div class="line"></div>
      <div class="progress-step">
        <div class="progress-step-circle">
          6
        </div>
        <div class="progress-step-label">
          step 6
        </div>
      </div>
      <div class="line"></div>
      <div class="progress-step">
        <div class="progress-step-circle">
          7
        </div>
        <div class="progress-step-label">
          step 7
        </div>
      </div>
    </div>
  </body>

</html>

【讨论】：

【解决方案2】：

.container {
  width: 600px;
  margin: 100px auto;
}

.progressbar {
  counter-reset: step;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
}

.progressbar li.active+li:after {
  background-color: #55b776;
}

<div class="container">
  <ul class="progressbar">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

【讨论】：