Вот несколько способов создания индикатора выполнения с помощью Bootstrap 5:

Метод 1: использование встроенного компонента индикатора выполнения Bootstrap.
Bootstrap 5 предоставляет предварительно созданный компонент индикатора выполнения, который можно легко настроить. Для создания индикатора выполнения вы можете использовать следующий HTML-код:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

В этом примере индикатор выполнения будет заполнен на 50 % своей ширины. Вы можете настроить это свойство, чтобы установить желаемый прогресс.

Метод 2: настройка внешнего вида индикатора выполнения
Bootstrap позволяет настроить внешний вид индикатора выполнения путем добавления дополнительных классов. Например, вы можете использовать bg-success, bg-info, bg-warningили bg-dangerклассы, чтобы изменить цвет фона индикатора выполнения. Вы также можете использовать класс progress-bar-striped, чтобы добавить полосы на индикатор выполнения.

Метод 3: отображение прогресса с помощью анимации
Чтобы анимировать индикатор выполнения, вы можете использовать класс progress-bar-animated. Этот класс добавляет эффект скольжения к индикатору выполнения, делая его визуально привлекательным.

Метод 4: добавление меток к индикатору выполнения
Вы можете добавить метки к индикатору выполнения, чтобы отображать текущий процент выполнения. Для этого вы можете включить элемент внутри индикатора выполнения с нужным текстом.

Метод 5. Динамическое управление индикатором выполнения
Если вы хотите динамически обновлять индикатор выполнения на основе взаимодействия с пользователем или данных, вы можете использовать JavaScript или jQuery. Управляя атрибутом styleэлемента индикатора выполнения, вы можете динамически изменять его ширину.