Учебники

Bootstrap — Прогресс Бары

Октябрь 25, 2018

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

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

Индикатор выполнения по умолчанию

Чтобы создать базовый индикатор выполнения —

  • Добавьте <div> с классом .progress .

  • Затем внутри <div> добавьте пустой <div> с классом .progress-bar .

  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «60%»; указывает на то, что индикатор выполнения был на 60%.

Добавьте <div> с классом .progress .

Затем внутри <div> добавьте пустой <div> с классом .progress-bar .

Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «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 и class progress-bar- *, где * может быть успех, информация, предупреждение, опасность .

  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «60%»; указывает на то, что индикатор выполнения был на 60%.

Добавьте <div> с классом .progress .

Затем, внутри <div>, добавьте пустой <div> с классом .progress-bar и class progress-bar- *, где * может быть успех, информация, предупреждение, опасность .

Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «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 и class progress-bar- *, где * может быть успех, информация, предупреждение, опасность .

  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «60%»; указывает на то, что индикатор выполнения был на 60%.

Добавьте <div> с классами .progress и .progress-striped .

Затем, внутри <div>, добавьте пустой <div> с классом .progress-bar и class progress-bar- *, где * может быть успех, информация, предупреждение, опасность .

Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «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 .

  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «60%»; указывает на то, что индикатор выполнения был на 60%.

Добавьте <div> с классами .progress и .progress-striped . Также добавьте класс .active к .progress-striped .

Затем внутри <div> добавьте пустой <div> с классом .progress-bar .

Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, стиль = «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>

Stacked Progress Bar

Вы даже можете сложить несколько индикаторов прогресса. Поместите несколько индикаторов выполнения в один .progress, чтобы сложить их, как показано в следующем примере.

52
Share: