Они не только стреляют из пушки по воробьям, но и не попадают в воробьев (Р. Фишер).

Bootstrap — Прогрессирующая шкала

2 мин для чтения

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — Прогрессирующая шкала

(1 оценок, среднее: 5,00 из 5)

Загрузка...

18.06.2017

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

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

Прогрессирующая шкала по умолчанию

Чтобы создать базовый индикатор:

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

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

<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% завершено</span>
   </div>
</div>

Альтернативная прогрессирующая шкала

Чтобы создать индикатор с различными стилями:

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

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

<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% Завершено (Успешно)</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% Завершено (Информация)</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% Завершено (Предупреждение)</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% Завершено (Опасно)</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% Завершено (Успешно)</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% Завершено (Информация)</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% Завершено (Предупреждение)</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% Завершено (Опасно)</span>
   </div>
</div>

Анимационная прогрессирующая шкала

Для того, чтобы создать анимированную прогрессирующую шкалу:

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

Данный код будет анимировать прогрессирующую шкалу справа налево.

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

<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% Завершено </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% Завершено (Успешно)</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% Завершено (Информация)</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% Завершено (Предупреждение)</span>
   </div>
   
</div>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.