В этой статье обсуждаются индикаторы выполнения 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>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok