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

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok