Как создать индикатор выполнения в Bootstrap 5?

Индикаторы выполнения используются для демонстрации навыков, процента выполнения проектов и для аналогичных целей. Bootstrap 5 имеет разные стили индикаторов выполнения, аналогичные предыдущим версиям. В этом руководстве мы подробнее рассмотрим каждый тип индикаторов выполнения, предлагаемых в Bootstrap 5.

Учебник Bootstrap 5 Progress Bars

Индикаторы выполнения HTML5
Индикаторы выполнения начальной загрузки CSS-классы
Создание индикаторов выполнения по умолчанию
Индикаторы выполнения с разными цветами фона
Добавление меток в индикаторы выполнения
Несколько индикаторов выполнения
Полосатый стиль
Анимированный полосатый стиль
Регулировка высоты

Давайте подробно обсудим каждую тему.

1. Индикаторы прогресса HTML5

Помните, что в HTML5 есть тег по умолчанию для создания горизонтальных индикаторов выполнения, чего достаточно в большинстве случаев. Ниже приведен блок кода индикаторов выполнения HTML5.

<progress value="50" max="100">50 %</progress><br />
<progress value="60" max="100">60 %</progress><br />
<progress value="70" max="100">70 %</progress><br />
<progress value="80" max="100">80 %</progress><br />

В браузере это будет выглядеть так:

50% 60% 70% 80%

Bootstrap не использует индикатор выполнения HTML5 и имеет собственный стиль для компонента индикатора выполнения.

2. Классы CSS, используемые в индикаторах выполнения начальной загрузки

Bootstrap 4 использует следующие классы CSS для создания индикаторов выполнения:

Класс «.progress» используется для внешней оболочки индикатора выполнения. Он используется для хранения нескольких индикаторов выполнения внутри оболочки.
Класс «.progress-bar» используется для создания фактического индикатора выполнения, показывающего процент прогресса.
Ширина каждого индикатора выполнения должна быть явно определена с помощью дополнительных классов CSS.
Кроме того, вы можете добавить атрибуты «role» и «aria» к индикатору выполнения для удобства чтения.
«Aria-valuenow» используется для обозначения текущего значения прогресса, «aria-valuemin» — это минимальное значение, равное 0, а «aria-valuemax» — максимальное значение, равное 100.

Давайте создадим несколько примеров с использованием этих классов.

3. Полосы прогресса по умолчанию

В индикаторе выполнения по умолчанию используется основной цвет для отображения хода выполнения и светло-серый фон. Ниже приведен код для создания пяти индикаторов выполнения с прогрессом 0, 25, 50, 75 и 100%.

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

В браузере это будет выглядеть так:

Как упоминалось выше, ширина каждого индикатора выполнения должна быть явно определена для отображения завершения. Для этой цели вы можете использовать либо встроенный стиль, либо служебные классы. Мы использовали классы полезного размера для 25%, 50% и 75% с w-25, w-50 и w-75 соответственно. Для ширины 100% мы использовали встроенный стиль с «шириной: 100%».

Также не забудьте добавить ручной разрыв строки между индикаторами выполнения, чтобы все столбцы не отображались на одной строке.

4. Индикаторы прогресса с фоном

Подобно многим другим компонентам, вы можете просто использовать служебные классы фона, чтобы изменить цвет фона на успех, предупреждение, информацию, опасность, темные или второстепенные цвета.

<div class="progress">
<div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div>
</div>

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

Обратите внимание, что основной цвет является значением по умолчанию, поэтому вам не нужно указывать, хотите ли вы, чтобы прогресс был основным цветом. Также вы не можете использовать светлый цвет фона, так как фон индикатора выполнения также имеет светлый цвет.

Вы можете использовать фоновые служебные классы во внешней оболочке прогресса, чтобы изменить фон индикатора выполнения. Например, в приведенном ниже коде будет отображаться индикатор выполнения с красным (опасным) цветом фона вместо светло-серого.

<div class="progress bg-danger">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Результат будет выглядеть в браузере, как показано ниже:

Индикатор выполнения с другим цветом фона

5. Полосы прогресса с ярлыками.

Если вы хотите добавить метки к индикатору выполнения, просто добавьте текст перед закрывающим тегом

каждого индикатора выполнения. Ниже приведен пример выполнения 75%:

<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div>
</div>

Метка будет отображаться в верхней части панели с выравниванием по центру, как показано ниже:

6. Несколько индикаторов прогресса

Добавление нескольких индикаторов выполнения в одну внешнюю оболочку приведет к созданию всех полос в одной строке.

<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>

Несколько индикаторов выполнения будут выглядеть, как показано ниже:

7. Полосатые индикаторы прогресса

Класс «.progress-bar-striped» используется для создания полосатых индикаторов выполнения (вспомогательный класс фона используется для отображения разных цветов).

<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<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">100%</div>
</div>

Полосатые индикаторы выполнения должны выглядеть, как показано ниже:

8. Анимированные полосатые индикаторы прогресса.

Последний вариант — анимировать полосу с помощью класса «.progress-bar-animated».

<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div>
</div>

Это создаст анимированный индикатор выполнения с зелеными полосами. Помните, что вы можете анимировать только полосатые полосы, но не стандартные.

9. Изменение высоты или толщины индикаторов прогресса.

По умолчанию индикатор выполнения будет иметь высоту 1 бэр. Вы можете изменить высоту, используя встроенный стиль в классе «.progress-bar», и внешняя оболочка будет автоматически выровнена соответствующим образом. Давайте создадим две полосы размером 0.rem и высотой 30 пикселей:

<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Результат в браузере должен быть таким, как показано ниже:

Проблема при изменении высоты заключается в том, что метки при использовании не выравниваются должным образом. Опять же, вам следует вручную использовать дополнительные стили, чтобы выровнять метки по вертикальному центру.

Изучите Bootstrap 5 (Индекс)