Прогресс бар html: Тег | htmlbook.ru

— HTML — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. На практике
   1. Борис Демченко советует

Кратко

Тег <progress> создаёт индикатор выполнения задачи. Обычно выглядит как прогресс-бар.

Пример

<p>Подождите, пожалуйста, файл загружается</p><progress value="30" max="100"></progress>
          <p>Подождите, пожалуйста, файл загружается</p>
<progress value="30" max="100"></progress>

Как понять

Тег <progress> стоит использовать для вывода информации о процессе, который выполняется и должен завершиться: прогресс загрузки файла, процесс соединения абонентов, длительность таймера.

💡

Если пользователю надо показать числовое значение в заданном диапазоне, лучше использовать тег <meter>.

• сообщить о количестве свободного места на диске;
• вывести допустимые пределы громкости;
• показать уровень загруженности интернет-канала.

Как пишется

• max — максимальное значение. Должно быть положительным, допускаются дробные значения. По умолчанию равно 1.
• value — текущее значение. Положительное число, допускаются дробные значения. Должно находится в пределах между 0 и значением атрибута max. Также его можно менять при помощи JavaScript. Если атрибут не прописан, то линия внутри прогресс-бара будет перемещаться от одного края к другому, показывая, что задача выполняется, но не известно, сколько это займёт времени.

К тегу <progress> применимы все глобальные атрибуты.

На практике

Борис Демченко советует

🛠 Внешний вид элемента <progress> может быть разным — это зависит от браузера и операционной системы устройства пользователя. Вот так стандартный прогресс-бар будет выглядеть на устройствах с macOS и Windows:

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

progress {  border: none;  background-color: #5068f6;}
          progress {
  border: none;
  background-color: #5068f6;
}
 

Но в Firefox эти стили не затронут бегунок, поэтому дополнительно потребуется использовать вендорный префикс -moz. А вот для стилизации в Chrome и Safari как самого элемента, так и его бегунка, необходимо использовать префиксы -webkit.

Поэтому для того, чтобы прогресс-бар и бегунок выглядели одинаково во всех основных браузерах, нам потребуется добавить следующие правила:

progress::-moz-progress-bar {  border: none;  background-color: #5068f6;}progress::-webkit-progress-bar {  border: none;  background-color: #5068f6;}progress::-webkit-progress-value {  background-color: #5068f6;}
          progress::-moz-progress-bar {
  border: none;
  background-color: #5068f6;
}
progress::-webkit-progress-bar {
  border: none;
  background-color: #5068f6;
}
progress::-webkit-progress-value {
  background-color: #5068f6;
}
 

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<object>

alt + ←

→

<canvas>

alt + →

Прогресс · Bootstrap v5.0

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

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

• Мы используем .progress как оболочку, чтобы указать максимальное значение индикатора выполнения.
• Мы используем внутренний .progress-bar, чтобы указать прогресс на данный момент.
• Для .progress-bar требуется встроенный стиль, служебный класс или пользовательский CSS для установки их ширины.
• .progress-bar также требует некоторых атрибутов role и aria, чтобы сделать его доступным.

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

<div>
  <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Метки

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

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Высота

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

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Фоны

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Мультибар

При необходимости включите несколько индикаторов выполнения в компонент прогресса.

<div>
  <div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Полосатый

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

<div>
  <div role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

Полосатый градиент также можно анимировать.

<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Sass

Переменные

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $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.

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

HTML-тег прогресса

❮ Предыдущий Полный справочник HTML Далее ❯

Пример

Показать индикатор выполнения:

Ход загрузки:
32%

Попробуйте сами »

Определение и использование

Совет: Всегда добавляйте тег для лучших практик доступности!

Советы и примечания

Совет: Используйте тег в сочетании с JavaScript для отображения хода выполнения задачи.

Примечание : Тег не подходит для представления датчика (например, использование дискового пространства или релевантность результата запроса). Чтобы представить калибр, вместо этого используйте тег .

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Атрибуты

Атрибут	Значение	Описание
макс.	номер	Указывает, сколько работы требуется задаче в целом. Значение по умолчанию 1
значение	номер	Указывает, какая часть задачи выполнена

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Ссылка HTML DOM: Progress Object

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

31 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Индикаторы выполнения Bootstrap

❮ Назад Далее ❯

Основной индикатор выполнения

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

Bootstrap предоставляет несколько типов индикаторов выполнения.

Индикатор выполнения по умолчанию в Bootstrap выглядит следующим образом:

Завершено на 70%

Чтобы создать индикатор выполнения по умолчанию, добавьте класс .progress в

Попробуйте сами »

Цветные индикаторы выполнения

Контекстные классы используются для предоставления «значения через цвета».

Контекстные классы, которые можно использовать с индикаторами выполнения:

• .progress-bar-success
• .прогресс-бар-информация
• .прогресс-бар-предупреждение
• .прогресс-бар-опасность

Завершено на 40 % (успешно)

Завершено на 50 % (информация)

Завершено на 60 % (предупреждение)

Завершено на 70 % (опасно)

В следующем примере показано, как создать индикаторы выполнения с различными контекстные классы:

Пример

Попробуйте сами »

Полосатые индикаторы выполнения

Индикаторы выполнения также могут быть полосатыми:

40% завершено (успех)

50% завершено (информация)

Завершено на 60 % (предупреждение)

Завершено на 70 % (опасно)

Добавьте класс . progress-bar-striped для добавления полос на индикаторы выполнения:

Пример

Попробуйте сами »

Анимированный индикатор выполнения

Добавьте класс .active для анимации индикатора выполнения:

Пример

Попробуйте сами »

Индикаторы выполнения с накоплением

Индикаторы выполнения также могут располагаться друг с другом:

<дел>
  <дел
    роль = "прогрессбар"
   >