Bootstrap предлагает компонент для отображения шкалы прогресса на веб-сайте. Такая шкала обычно используются чтобы предоставить пользователю обратную связь о ходе выполнения определённого процесса или действия. Пользователи могут визуально понять, сколько всего выполнено и сколько ещё осталось до завершения.
Шкала прогресса по умолчанию
Чтобы создать шкалу прогресса по умолчанию, используйте класс .progress с вложенным в него .progress-bar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Контекстные классы
Вы можете использовать контекстные классы, чтобы включить дополнительную семантику через цвет.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-light" role="progressbar" style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Полоски
Вы можете сделать шкалу с полосками, добавив класс .progress-bar-striped к элементу .progress-bar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar"
style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar"
style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar"
style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-light" role="progressbar"
style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-dark" role="progressbar"
style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Анимированные полоски
Вы можете анимировать полоски, добавив класс .progress-animated к элементу .progress.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
В ранней версии Bootstrap 4 Alpha для шкалы прогресса использовался элемент <progress>. Однако от этого метода отказались в в Alpha 6.