1111
Перейти к основному содержаниюПерейти к навигации по документам
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
<divclass="progress"role="progressbar"aria-label="Basic example"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar"style="width: 0%"></div></div><divclass="progress"role="progressbar"aria-label="Basic example"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar"style="width: 25%"></div></div><divclass="progress"role="progressbar"aria-label="Basic example"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar"style="width: 50%"></div></div><divclass="progress"role="progressbar"aria-label="Basic example"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar"style="width: 75%"></div></div><divclass="progress"role="progressbar"aria-label="Basic example"aria-valuenow="100"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar"style="width: 100%"></div></div>

Размер бара

Ширина

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

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

Высота

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

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

Метки

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

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

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

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

Фон

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

html
<divclass="progress"role="progressbar"aria-label="Success example"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-success"style="width: 25%"></div></div><divclass="progress"role="progressbar"aria-label="Info example"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-info"style="width: 50%"></div></div><divclass="progress"role="progressbar"aria-label="Пример предупреждения"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-warning"style="width: 75%"></div></div><divclass="progress"role="progressbar"aria-label="Пример опасности"aria-valuenow="100"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-danger"style="width: 100%"></div></div>
Совет по специальным возможностям. Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержания (например, видимого текста) или включено с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.

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

25%
50%
75%
100%
html
<divclass="progress"role="progressbar"aria-label="Пример успеха"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-success"style="width: 25%">25%</div></div><divclass="progress"role="progressbar"aria-label="Пример информации"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-info text-dark"style="width: 50%">50%</div></div><divclass="progress"role="progressbar"aria-label="Пример предупреждения"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-warning text-dark"style="width: 75%">75%</div></div><divclass="progress"role="progressbar"aria-label="Пример опасности"aria-valuenow="100"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar bg-danger"style="width: 100%">100%</div></div>

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

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

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

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

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

Полосатые

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

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

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

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

html
<divclass="progress"role="progressbar"aria-label="Animated striped example"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"><divclass="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:1slinearinfinite;$progress-bar-transition:width.6sease;

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

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

scss/_progress.scss
@if$enable-transitions{@keyframesprogress-bar-stripes{0%{background-position-x:$progress-height;}}}