Блог

Главная - Вопросы по программированию - Как создать пошаговый прогресс с этим дизайном в css?

Как создать пошаговый прогресс с этим дизайном в css?

#css #progress-bar

#css #индикатор выполнения

Вопрос:

Мне нужно создать пошаговую панель прогресса, подобную примеру изображения в css,

пошаговое изображение

В этом моменте у меня есть это, я выбираю фон для кругов и полос, можете ли вы показать мне примеры в css?

введите описание изображения здесь

Спасибо, если вы поможете

Комментарии:

1. @RayeesAC речь идет о стилизации 😉 граница и тень

2. не могли бы вы, пожалуйста, добавить последний код, который нужно опробовать?

Ответ №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>