Руководство Bootstrap ProgressBar

1- Progress Bar

Progress Bar (Индикатор процесса) является визуальным компонентом интерфейса для описания прогресса работы, например прогресс скачивания, прогресс установки. Progress Bar позволяет пользователю знать процент завершения работы и оценку времени завершения работы.Bootstrap предоставляет несколько классов, чтобы вы построили Progress Bar.

.progress-bar: Данный класс используется для элемента (element), обозначающий прогресс текущей работы.
.progress: Данный класс используется для элемента обертывающего (wrap) элемент .progress-bar, обозначающий максимальное значение индикатора процесса.

<div class="progress">
 
   <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
      80%
   </div>
 
</div>

Объяснение кода:

Атрибут (Attribute)	Описание
aria-valuemin aria-valuemax aria-valuenow	Минимальное, максимальное и текущее значение прогресса (progress). Данные атрибуты не влияют на отображение длины progress-bar, который вы видите на интерфейсе. Но эти атрибуты позволяют вам получить значение через jаvascript.
style="width:80%"	Это способ отображения длины (процент) у progress-bar, который вы видите на интерфейсе.

Полный пример:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Progress Bar Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container mt-3">
         <h4>Progress Bar:</h4>
 
         <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
               80%
            </div>
         </div>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Colors:

Вы можете применить фоновый цвет для Progress-bar, ниже является список фоновых цветов определнных заранее в Bootstrap.

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-muted
bg-white

Соответственно пример кода:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Progress Bar Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
      .progress {
         margin: 5px 0px;
      }
      </style>
   </head>
   <body>
      <div class="container mt-3">
         <h4>Colored Progress Bars:</h4>
 
         <div class="progress">
            <div class="progress-bar bg-success text-left" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
               40% Complete (.bg-success)
            </div>
         </div>
 
         <div class="progress">
            <div class="progress-bar bg-info text-left" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
               50% Complete (.bg-info)
            </div>
         </div>
 
         <div class="progress">
            <div class="progress-bar bg-warning text-left" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
               60% Complete (.bg-warning)
            </div>
         </div>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 
   </body>
</html>

Height:

Вам нужно настроить только высоту для .progress, и все внутри .progress-bar так же автоматически поменяют высоту.

<div class="progress" style="height:5px;">
   <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
   </div>
</div>
 
<br>
 
<div class="progress" style="height:55px;">
   <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
   </div>
</div>

{banner_google}

2- Striped Progress Bar

Используйте класс .striped-progress-bar вместе с .progress-bar вы сможете получить индикатор процесса (progress bar) с полосками (Stripe)

<div class="progress">
 
   <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
      80%
   </div>
 
</div>

Комбинируя 2 класса .progress-bar-striped & .progress-bar-animated, вы сможете создать индикатор процесса с анимационным эффектом.

<div class="progress">
 
   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
      80%
   </div>
 
</div>

3- Stacked Progress Bar

Индикаторы процесса (progress-bar) так же могут быть сложены (stack) вместе. Изображение ниже.

<div class="progress">
 
   <div class="progress-bar" role="progressbar" style="width: 15%"
      aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
      Music 3GB
   </div>
 
   <div class="progress-bar bg-success" role="progressbar" style="width: 30%"
      aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
      Video 6GB
   </div>
 
   <div class="progress-bar bg-info" role="progressbar" style="width: 20%"
      aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
      Picture 4GB
   </div>
 
</div>

Информация

Посетители, находящиеся в группе Гости, не могут скачивать файлы с нашего сайта.

Пожалуйста зарегистрируйтесь или авторизируйтесь для доступа к файлу.

У данной публикации нет комментариев.

Ublogi

Автор

1-09-2020, 23:54

Дата пуликации

Пособие Bootstrap

Категория

Комментариев: 0
Просмотров: 441

DLE-Модули

Модуль статистики для DLE LightStat v3.0

Блог

Заработок на ютуб канале

HTML

Таблица HTML элементов

HTML

Расшифровка html тегов

CSS

Цвета в CSS

Статистика

1 посетитель на сайте. Из них:

Гости1

Комментарии

Ссылка ведет на реферальную ссылку. Мне бы достать ориг этого скрипта т.к у меня есть копия, но надо откатить некоторые правки... да в 2k25 я использую подобные скрипты значит в этом есть смысл другое вам знать не нужно..

24 августа 2025 20:35

kouttepe

Ссылка на скачку не работает

22 июля 2025 21:37

Ilya5412

Ссылка на скачивание не рабочая

31 августа 2023 18:55

smoky

Ссылка нерабочая

28 августа 2023 16:17

Mandarin4ik2007

Ublogi,
дайте ссылку на скачивание

7 августа 2023 11:24

mandarin4ik

Бесплатный хостинг с поддержкой PHP, MySQL, Python. Это отличная возможность проверить работу своего сайта на настоящем хостинге без рекламы. Заказать хостинг