Bootstrap 4 Индикаторы выполнения
Основной индикатор выполнения
Индикатор выполнения можно использовать, чтобы показать пользователю, как далеко он продвинулся в процессе.
Чтобы создать индикатор выполнения по умолчанию, добавьте .progressкласс в элемент-контейнер и добавьте .progress-barкласс в его дочерний элемент. Используйте widthсвойство CSS, чтобы установить ширину индикатора выполнения:
Пример
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Высота индикатора выполнения
Высота индикатора выполнения по умолчанию составляет 16 пикселей. Используйте heightсвойство CSS, чтобы изменить его. Обратите внимание, что вы должны установить одинаковую высоту для контейнера выполнения и индикатора выполнения:
Пример
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Ярлыки индикатора выполнения
Добавьте текст внутри индикатора выполнения, чтобы показать видимый процент:
Пример
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Цветные индикаторы выполнения
По умолчанию индикатор выполнения синий (основной). Используйте любой из контекстных классов фона Bootstrap 4, чтобы изменить его цвет:
Пример
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Полосатые индикаторы прогресса
Используйте .progress-bar-stripedкласс, чтобы добавить полоски в индикаторы выполнения:
Пример
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Анимированный индикатор выполнения
Добавьте .progress-bar-animatedкласс для анимации индикатора выполнения:
Пример
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Несколько индикаторов выполнения
Индикаторы выполнения также могут быть сложены:
Пример
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>