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

Используйте наш пользовательский компонент progress для отображения простых или сложных индикаторов выполнения. Мы не используем the HTML5 <progress> element, гарантируя, что вы можете сложить индикаторы выполнения, анимировать их и поместить над ними текстовые метки.

Содержание

Содержание
Как это работает
Настройка

Как это работает

Компоненты индикатора выполнения создаются с помощью двух элементов HTML, некотоого CSS для установки ширины и нескольких атрибутов.

Мы используем .progress как обертку, чтобы указать максимальное значение индикатора выполнения.
Мы используем внутренний .progress-bar, чтобы показать прогресс до сих пор.
.progress-bar требует встроенного стиля, класса утилит или настраиваемого CSS для установки ширины.
The .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>

Настройка

Настройте внешний вид свего индикатора выполнения с помощью настраиваемых CSS, фоновых утилит, полосок и т. д.

Метки

Добавьте метки в ваш индикатор выполнения, поместив текст в .progress-bar.

25%

<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-bar, поэтому, если вы измените это значение, внешний .progress автоматически изменит размер соответственно.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" 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.

Анимированные индикаторы выполнения не работают в Opera 12-так как они не поддерживают анимацию CSS3.

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

Компоненты