Блог

Главная - Вопросы по программированию - Индикатор выполнения шага на активном шаге

Индикатор выполнения шага на активном шаге

#html #css

Вопрос:

Я пытаюсь реализовать индикатор выполнения шага.

Линия, разделяющая обведенные ступени, имеет серый фон. Однако этот фон не работает на «активном» шаге. В приведенном ниже примере оранжевая линия распространяется только на 60%. Я хочу, чтобы остальная часть линии была серой, как и другие.

 body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

.progressbar {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}

.progressbar li {
  list-style-type: none;
  width: 30%;
  float: left;
  font-size: 1rem;
  position: relative;
  text-align: center;
  color: #000;
}

.progressbar li:after {
  width: 100%;
  height: 6px;
  content: "";
  position: absolute;
  background-color: #C8C8C8;
  top: 30px;
  left: -50%;
  z-index: -1;
}

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

.progressbar li.active li:after {
  background-color: #F5A000;
  width: 60%;
}

.progressbar li:before {
  width: 72px;
  height: 72px;
  display: block;
  text-align: center;
  margin: auto;
  border-radius: 50%;
  background-color: #FFF;
  color: #000;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressbar li.active:before {
  background-color: #F5A000;
}


/* Step Count */

ul.rb-step {
  counter-reset: step;
}

ul.rb-step li:before {
  content: counter(step);
  counter-increment: step;
} 
 <html>

<head>

  <meta chartset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://kit.fontawesome.com/0f876a0d49.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />


  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css" />
</head>

<body>

  <div class="container mt-5 pt-5">


    <ul class="progressbar rb-step d-flex justify-content-center">
      <li class="active">login</li>
      <li>Add Mobile</li>
      <li>Add Email</li>
      <li>All Done</li>
    </ul>
  </div>
</body>

</html>

с помощью этого кода я получаю только 60% желтой части. Остальные 40% должны быть серыми.Любая помощь будет признательна.

Спасибо

Ответ №1:

Вот так?

 body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

.progressbar {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}
.progressbar li {
  list-style-type: none;
  width: 30%;
  float: left;
  font-size: 1rem;
  position: relative;
  text-align: center;
  color: #000;

}

.progressbar li:after {
  width: 100%;
  height: 6px;
  content: "";
  position: absolute;
  background-color: #C8C8C8;
  top: 30px;
  left: -50%;
  z-index: -1;

}


.progressbar li:first-child:after {
  left:100% !important;
}


.progressbar li.active   li:after {
  background-color: #F5A000;
  width: 60%;
}




.progressbar li:before {
  width: 72px;
  height: 72px;
  display: block;
  text-align: center;
  margin: auto;
  border-radius: 50%;
  background-color: #FFF;
  color: #000;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressbar li.active:before {
  background-color: #F5A000;
}



/* Step Count */
ul.rb-step {
  counter-reset: step;
}

ul.rb-step li:before {
  content: counter(step);
  counter-increment: step;
} 
 <html>
  <head>
    
    <meta chartset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script
      src="https://kit.fontawesome.com/0f876a0d49.js"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
   
    
    <link
      href="https://fonts.googleapis.com/css?family=Poppins"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body>
    
    <div class="container mt-5 pt-5">
      
      
          <ul class="progressbar rb-step d-flex justify-content-center">
            <li class="active">login</li>
            <li>Add Mobile</li>
            <li>Add Email</li>
            <li>All Done</li>
          </ul>
          </div>     
  </body>
</html>

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

1. Спасибо @Spectric за ваш ответ. Но это не решение, потому что ваше исправление работает только в том случае, если активен первый элемент списка. Это не работает, если другие элементы списка имеют активный класс.

Метки: