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>

Читайте также

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

5 лет назад

Вопросы для собеседования по Bootstrap

1 год назад

Как пользоваться bootstrap Glyphicons

8 лет назад

0 0 голоса

Рейтинг статьи

Подписаться

авторизуйтесь

Уведомить о

новых последующих комментарияхновых ответах на мои комментарии

Я разрешаю использовать свой email и отправлять уведомления о новых комментариях и ответах (вы cможете отказаться от подписки в любое время).

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

0 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии