Прогресс

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

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

Новая разметка в v5.3.0 — Мы объявили устаревшей предыдущую HTML структуру для индикаторов прогресса и заменили её на более доступную. Предыдущая структура будет продолжать работать до v6. Посмотрите, что изменилось в нашем руководстве по миграции.

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

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

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

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

html

<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.

html

<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 автоматически изменит размер соответственно.

html

<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.

25%

html

<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>

Длинные метки

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

Метки длиннее, чем индикатор прогресса, могут быть не полностью доступными при использовании этого метода, поскольку он полагается на то, что цвет текста имеет правильное соотношение контрастности как с фоновыми цветами .progress, так и .progress-bar. Будьте осторожны при реализации этого примера.

Если текст может перекрывать индикатор прогресса, мы часто рекомендуем отображать метку вне индикатора прогресса для лучшей доступности.

Фоны

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

html

<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.

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

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-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 text-bg-info" 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 text-bg-warning" 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 text-bg-danger" style="width: 100%">100%</div>
</div>

Множественные полосы

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

html

<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 градиент поверх фонового цвета индикатора прогресса.

html

<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 анимации.

html

<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

Переменные

Добавлено в v5.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: var(--#{$prefix}progress-height); }
  }
}