Cмотреть на GitHub

Прогрессбар

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

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

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

Как это устроено

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

Мы используем .progress в качестве оболочки, чтобы указать максимальное значение индикатора выполнения.
Оболочке .progress также требуются атрибуты role="progress" и 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 из утилит переполнения, но не забудьте также определить явный цвет текста , чтобы текст оставался читабельным. Однако имейте в виду, что в настоящее время этот подход не учитывает цветовые режимы.

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

html

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

Фон

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

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="Пример предупреждения" 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="Пример опасности" 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="Пример успеха" 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="Пример информации" 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="Пример предупреждения" 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="Пример опасности" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

Кроме того, вы можете использовать новые комбинированные вспомогательные классы цвет и фон.

75%

html

<div class="progress" role="progressbar" aria-label="Пример предупреждения" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</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

Переменные

Добавлено в версии 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; }
  }
}