Блог

Главная - Вопросы по программированию - Как получить приведенный ниже результат с помощью начальной загрузки 4

Как получить приведенный ниже результат с помощью начальной загрузки 4

#html #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я пробовал с индикаторами выполнения, но проблема в том, что я остаюсь частью индикатора выполнения.

Желаемый Результат

Например, если я указал ширину на индикаторе выполнения, я получаю оставшийся процент в виде серого цвета

В конечном итоге при использовании индикаторов выполнения

Ответ №1:

Почему бы не с некоторыми дивами?

 .bars-container{
  margin:2em auto;
  width:200px;
  height:30px;
  position:relative;
}
.bars-container > div{
  width:50%;
  height:100%;
  position:absolute;
}
.negative{
  right:50%;
}
.negative div{
    background:red;
    height: 100%;
    position: absolute;
    right: 0;}
.positive{
  left:50%;
}
.positive div{
  background:green;
  height:100%;
} 
 <div class="bars-container">
  <div class="negative"><div style="width:90%"></div></div>
  <div class="positive"><div style="width:5%"></div></div>
</div>
Метки: