Глаза дружбы редко ошибаются (Ф. Вольтер).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
18 июня 2017
Bootstrap - Прогрессирующая шкала
В этой главе обсуждаются о прогрессирующей шкале в 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.

Просмотров: 97

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close