Bootstrap Progress (Прогресс бар)

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

Новая разметка в версии 5.3.0 — Мы устарели от предыдущей структуры HTML для индикаторов выполнения и заменили ее более доступной. Предыдущая структура будет продолжать работать до версии 6.

Как это работает

Компоненты прогресса построены из двух HTML-элементов, некоторого количества CSS для установки ширины и нескольких атрибутов. Мы не используем <progress> HTML5, поэтому вы можете складывать индикаторы выполнения, анимировать их и размещать текстовые надписи поверх них.

Мы используем .progress в качестве оболочки для указания максимального значения индикатора выполнения.
Для .progress оболочки также требуются атрибуты role="progressbar" и aria, чтобы сделать ее доступной, включая доступное имя (используя aria-label, aria-labelledby или аналогичное).
Мы используем внутренний .progress-bar исключительно для визуальной панели и метки.
Для .progress-bar установки его ширины требуется встроенный стиль, служебный класс или пользовательский CSS.
Мы предоставляем специальный .progress-stacked класс для создания нескольких / сложенных индикаторов выполнения.

Соедините все это вместе, и у вас получатся следующие примеры.

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

Результат:

Определение размера

Ширина

Bootstrap предоставляет несколько утилит для настройки ширины. В зависимости от ваших потребностей, они могут помочь быстро настроить ширину .progress-bar.

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

Результат:

Высота

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

<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Результат:

Метки

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

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

Результат:

25%

Обратите внимание, что по умолчанию содержимое внутри .progress-bar управляется с помощью overflow: hidden, поэтому оно не вытекает из панели. Если индикатор выполнения короче, чем его метка, содержимое будет ограничено и может стать нечитаемым. Чтобы изменить это поведение, вы можете использовать .overflow-visible из утилит переполнения, но не забудьте также указать явный цвет текста, чтобы текст оставался читаемым. Однако имейте в виду, что в настоящее время этот подход не учитывает цветовые режимы.

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Длинный текст метки для индикатора выполнения, заданный темным цветом</div>
</div>

Результат:

Длинный текст метки для индикатора выполнения, заданный темным цветом

Фоны

Используйте фоновые служебные классы для изменения внешнего вида отдельных индикаторов выполнения.

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Результат:

Совет по доступности: Использование цвета для придания значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержимого (например, видимого текста с достаточным цветовым контрастом) или включено альтернативными средствами, такими как дополнительный текст, скрытый с помощью .visually-hidden класса.

Если вы добавляете надписи к индикаторам выполнения с пользовательским цветом фона, убедитесь, что также задан соответствующий цвет текста, чтобы надписи оставались читаемыми и имели достаточный контраст.

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

Результат:

25%

50%

75%

100%

В качестве альтернативы вы можете использовать новые объединенные вспомогательные классы color и background.

<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>

Результат:

75%

Несколько баров

Вы можете включить несколько компонентов прогресса в контейнер с помощью .progress-stacked, чтобы создать единый индикатор выполнения. Обратите внимание, что в этом случае стиль для установки визуальной ширины индикатора выполнения должен применяться к .progress элементам, а не к символам .progress-bar.

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Результат:

Полосатый

Добавьте .progress-bar-striped к любому .progress-bar, чтобы применить полосу с помощью CSS-градиента поверх цвета фона индикатора выполнения.

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

Результат:

Анимированные полосы

Полосатый градиент также можно анимировать. Добавьте .progress-bar-animated в .progress-bar, чтобы анимировать полосы справа налево с помощью анимации CSS3.

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

Результат:

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к CSS-переменным, индикаторы выполнения теперь используют локальные CSS-переменные на .progress для улучшенной настройки в режиме реального времени. Значения для переменных CSS устанавливаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_progress.scss

--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Переменные Sass

scss/_variables.scss

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       var(--#{$prefix}secondary-bg);
$progress-border-radius:            var(--#{$prefix}border-radius);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Ключевые кадры

Используется для создания CSS-анимации для .progress-bar-animated. Включено в scss/_progress-bar.scss.

scss/_progress.scss

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}

На этой странице