Прогресс-бар Bootstrap4

Индикаторы выполнения могут отображать прогресс выполнения задач пользователя.

Шаги для создания базового индикатора выполнения следующие:

  • Добавьте <div> с классом.progress.
  • Затем внутри вышеуказанного <div> добавьте пустой <div> с классом.progress-bar.
  • Добавьте атрибут style с шириной в процентах, например style="width:70%"указывающий, что индикатор выполнения находится на70%позиции.

Пример

<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>

Попробуйте сами »

Высота индикатора выполнения

По умолчанию высота индикатора выполнения составляет 16px. Мы можем использовать CSSheightсвойство для его изменения:

Пример

<div class="progress" style="height:20px;"> <div class="progress-bar" style="width:40%;"></div> </div>

Попробуйте сами »

Подпись прогресс-бара

Вы можете добавить текст внутри прогресс-бара, например процент выполнения:

Пример

<div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div>

Попробуйте сами »

Прогресс-бары разных цветов

По умолчанию прогресс-бар синий. Bootstrap4 также предоставляет прогресс-бары следующих цветов:

Пример

<div class="progress"> <div class="progress-bar bg-success" style="width:40%"></div> </div> <div class="progress"> <div class="progress-bar bg-info" style="width:50%"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" style="width:60%"></div> </div> <div class="progress"> <div class="progress-bar bg-danger" style="width:70%"></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%"> Свободное пространство </div> <div class="progress-bar bg-warning" style="width:10%"> Предупреждение </div> <div class="progress-bar bg-danger" style="width:20%"> Опасность </div> </div>

Попробуйте сами »
Другие расширения