Bootstrap5 Индикатор выполнения

Прогресс-бар может отображать процесс выполнения задачи пользователя.

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

  • Добавьте один <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>

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

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

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

Пример

<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>

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