Bootstrap - Индикаторы процессов (progress bar)

На этом уроке вы узнаете, как создать индикаторы процессов (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%


   Bootstrap 0    8181 +1

Комментарии (6)

  1. ctac 31 октября 2016, 18:06 # 0
    А как можно сделать что бы прогресс бар показывал с права на лево?
    1. Александр Мальцев 02 ноября 2016, 11:40 # 0
      Установить для него CSS свойство float со значением right.
      Пример 1:
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%; float:right;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
      
      Пример 2:
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-danger" style="width: 80%; float: right;">
          <span class="sr-only">Завершено 80%</span>
        </div>
      </div>
      
      1. ctac 02 ноября 2016, 11:47 # 0
        странно. так же делал. но только пустые линии были.
        спс. попробую.
        1. ctac 02 ноября 2016, 16:29 # 0
          спасибо. сработало. странно однако ))
    2. ctac 02 ноября 2016, 16:31 # 0
      а есть ли возможность поменять направление полосочек? тут даже мыслей нет.
      спс
      1. Александр Мальцев 05 ноября 2016, 12:24 # 0
        Можно для этого необходимо установить значение угла в linear-gradient.
        Например, 90 градусов:
        .progress-bar-striped, .progress-striped .progress-bar {
          background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
          background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
          background-image: linear-gradient(90deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        }
        

      Вы должны авторизоваться, чтобы оставлять комментарии.