Bootstrap 4 прогрес-бар

Основний прогрес-бар

Прогрес-бар може бути використаний для показу користувачеві, наскільки швидко і на якому етапі знаходиться той чи інший процес виконання певного завдання.

Щоб створити прогрес-бар за замовчуванням, додайте клас .progress до елемента контейнера і додайте клас .progress-bar до дочірнього елемента. Використовуйте width властивість CSS для встановлення ширини прогрес-бару:

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

See the Pen
Базовий прогрес-бар
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Висота прогрес-бару

За замовчуванням висота прогрес-бару – 16px. Використовуйте heightвластивість CSS, щоб змінити її. Майте на увазі, що ви повинні встановити однакову висоту для контейнера прогрес-бару та індикатора виконання:

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

See the Pen
Висота прогрес-бару
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Мітки на прогрес-барі

Додайте текст в елемент з класом .progress-bar, щоб показати відсоток прогресу:

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

See the Pen
Мітки в прогрес-барі
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Кольорові смуги прогрес-бару

За замовчуванням індикатор виконання є синім. Використовуйте будь-який з контекстних фонових класів Bootstrap 4 зміни кольору індикатора виконання:

<!-- Синій -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Зелений -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Голубий -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Оранжевий -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Червоний -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- Білий -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Сірий -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Світло-сірий -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Темно-сірий -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

See the Pen
Кольоровий прогрес-бар
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Смугастий прогрес-бар

Використовуйте клас .progress-bar-striped для додавання смуг до прогрес-бару:

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

See the Pen
Смугастий прогрес-бар
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Анімований прогрес-бар

Додайте клас.progress-bar-animated для анімації прогрес-бару:

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

See the Pen
Анімований прогрес-бар
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Кілька смуг прогресу

Індикаторів прогресу може бути кільки на одній смузі:

See the Pen
Кілька смуг прогресу
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

На цьому я завершаю даний урок і сподіваюся він вам дуже сподобався. Якщо ви пропустили минулий урок по темі Bootstrap 4, можете пройти його саме зараз!

Гарного дня і здійснення мрій!

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: