Bootstrap - Индикаторы прогресса

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

Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранних версиях Firefox. Opera 12 не поддерживает анимацию.

Индикатор выполнения по умолчанию

Чтобы создать базовый индикатор выполнения -

Добавьте <div> с классом .progress.
Затем внутри <div> добавьте пустой <div> с классом .progress-bar.
Добавьте атрибут стиля с шириной, выраженной в процентах. Скажите, например, style = "60%"; указывает, что индикатор выполнения был на 60%.

Давайте посмотрим на пример ниже -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Альтернативный индикатор выполнения

Чтобы создать индикатор выполнения с разными стилями -

Добавьте <div> с классом .progress.
Затем внутри <div> добавьте пустой <div> с классом .progress-bar и класс progress-bar-* где * могло быть success, info, warning, danger.
Добавьте атрибут стиля с шириной, выраженной в процентах. Скажите, например, style = "60%"; указывает, что индикатор выполнения был на 60%.

Давайте посмотрим на пример ниже -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Полосатый индикатор выполнения

Чтобы создать полосатый индикатор выполнения -

Добавьте <div> с классом .progress и .progress-striped.
Затем внутри <div> добавьте пустой <div> с классом .progress-bar и класс progress-bar-* где * могло быть success, info, warning, danger.
Добавьте атрибут стиля с шириной, выраженной в процентах. Скажите, например, style = "60%"; указывает, что индикатор выполнения был на 60%.

Давайте посмотрим на пример ниже -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Анимированная полоса прогресса

Чтобы создать анимированный индикатор выполнения -

Добавьте <div> с классом .progress и .progress-striped. Также добавьте класс.active к .progress-striped.
Затем внутри <div> добавьте пустой <div> с классом .progress-bar.
Добавьте атрибут стиля с шириной, выраженной в процентах. Скажите, например, style = "60%"; указывает, что индикатор выполнения был на 60%.

Это оживит полосы справа налево.

Давайте посмотрим на пример ниже -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Сложенная полоса прогресса

Вы даже можете складывать несколько индикаторов выполнения. Поместите несколько индикаторов выполнения в один.progress чтобы сложить их, как показано в следующем примере -

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>