Прогресс
Документация и примеры использования настраиваемых индикаторов выполнения Bootstrap с поддержкой полос с накоплением, анимированных фонов и текстовых меток.
Компоненты прогресса состоят из двух элементов HTML, небольшого количества CSS для установки ширины и нескольких атрибутов. Мы не используем элемент HTML5<progress>
, поэтому вы можете складывать индикаторы выполнения, анимировать их и размещать над ними текстовые метки.
- Мы используем в
.progress
качестве оболочки, чтобы указать максимальное значение индикатора выполнения. - Мы используем внутреннюю часть
.progress-bar
, чтобы указать прогресс до сих пор. - Для
.progress-bar
установки их ширины требуется встроенный стиль, служебный класс или пользовательский CSS. - Также
.progress-bar
требуются некоторыеrole
иaria
атрибуты, чтобы сделать его доступным.
Соедините все это вместе, и вы получите следующие примеры.
<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" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" 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>
Bootstrap предоставляет несколько утилит для установки ширины . В зависимости от ваших потребностей они могут помочь с быстрой настройкой прогресса.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Добавьте метки к индикаторам выполнения, поместив текст в файл .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Мы устанавливаем height
значение только для .progress
, поэтому, если вы измените это значение, внутренний .progress-bar
размер автоматически изменится соответствующим образом.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Используйте фоновые служебные классы, чтобы изменить внешний вид отдельных индикаторов выполнения.
<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>
<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>
<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>
<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>
Включите несколько индикаторов выполнения в компонент выполнения, если вам нужно.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Добавьте .progress-bar-striped
к любому .progress-bar
, чтобы применить полосу с помощью градиента 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>
<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>
<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>
<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>
<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>
Полосатый градиент также можно анимировать. Добавьте .progress-bar-animated
, чтобы .progress-bar
анимировать полосы справа налево с помощью анимации CSS3.