Руководство 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
Просмотров: 375

DLE-Модули

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

Блог

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

HTML

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

HTML

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

CSS

Цвета в CSS

Статистика

2 посетителя на сайте. Из них:

Гости1

Роботы1

Список пользователей

Vitalash Был(a) в сети 12 часов назад

Комментарии

Где кодировку поменять?

26 апреля 2023 11:24

Bipolyarich

Перезалейте файл.

12 апреля 2023 10:23

jerema

гавно ваш сайт. ничерта не работает. все ссылки битые.

25 февраля 2023 00:21

Raza121

Ublogi, ссылка не активна, и еще вопрос инструкция по установке есть?

20 февраля 2023 19:59

tema2021astra

не работает ссылка на скачивание перезалейте

19 февраля 2023 07:38

aladin

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

Идеальное решение для создания публичной или частной социальной сети. Хотите ли вы подключить школу, бизнес, организацию или просто создать свой собственный сайт, FastSocial имеет все необходимые функции. Создать социальную сеть