На этом уроке вы узнаете, как создать индикаторы процессов (progress bars) с помощью Twitter Bootstrap.

Создание индикаторов процессов с помощью Twitter Bootstrap 3

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

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">завершено 60%</span>
  </div>
</div>
завершено 60%

Создание индикаторов процессов с меткой

Удалите класс .sr-only из кода индикатора процесса, чтобы показать отображение метки с процентами. Для низких значений процентов, необходимо добавить CSS свойство min-width, чтобы обеспечить полную видимость текста метки.

<div class="progress">
  <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%; min-width:30px;">
    2%
  </div>
</div>
60%
2%

Создание полосатых индикаторов процессов

Для создания полосатых индикаторов процессов необходимо добавить дополнительный класс .progress-striped к базовому классу.

<div class="progress progress-striped">
  <div class="progress-bar" style="width: 60%;">
    <span class="sr-only">Завершено 60%</span>
  </div>
</div>
Завершено 60%

Предупреждение: Полосатые индикаторы процессов используют градиент, чтобы создать этот эффект. Из-за этого свойства они не поддерживаются в браузерах Internet Explorer 7 и 8.

Создание анимированных индикаторов процессов

Чтобы создать анимированный индикатор процесса необходимо добавить класс .active к классу .progress-stripped. Класс .active задаёт анимацию полос справа налево.

<div class="progress progress-striped active">
  <div class="progress-bar" style="width: 60%;">
    <span class="sr-only">Завершено 60%</span>
  </div>
</div>
Завершено 60%

Внимание: Анимированные индикаторы процессов не поддерживаются в браузерах IE до 9 версии включительно, т.к. в них отсутствует поддержка свойств анимации CSS3.

Создание «сложенных» индикаторов процессов

Вы так же можете разместить несколько разных индикаторов в один с помощью логического блока <div> и класса .progress.
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">Завершено 35% (успех)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 40%">
    <span class="sr-only">Завершено 40% (предупреждение)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 15%">
    <span class="sr-only">Завершено 15% (опасность)</span>
  </div>
</div>
Завершено 35% (успех)
Завершено 40% (предупреждение)
Завершено 15% (опасность)

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

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

<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%">
    <span class="sr-only">40% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 60%">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>
Завершено 20%
Завершено 40%
Завершено 60%
Завершено 80%

Полосатые индикаторы процессов с акцентными классами

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

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" style="width: 20%">
    <span class="sr-only">Завершено 20%</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" style="width: 40%">
    <span class="sr-only">Завершено 40%</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 60%">
    <span class="sr-only">Завершено 60%</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 80%">
    <span class="sr-only">Завершено 80%</span>
  </div>
</div>
Завершено 20%
Завершено 40%
Завершено 60%
Завершено 80%