<progress> HTML-элемент индикатора выполнения
Baseline Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Элемент <progress> HTML отображает индикатор хода выполнения задачи, обычно представленный в виде индикатора выполнения.
Попробуйте
<label for="file">File progress:</label> <progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
Атрибуты
Этот элемент включает глобальные атрибуты.
max-
Этот атрибут описывает, какой объём работы требуется для задачи, обозначенной элементом
progress. Атрибутmax, если он указан, должен иметь значение больше0и быть допустимым числом с плавающей точкой. Значение по умолчанию —1. value-
Этот атрибут указывает, какая часть задачи уже выполнена. Его значение должно быть допустимым числом с плавающей точкой в диапазоне от
0доmaxили от0до1, еслиmaxне указан. Если атрибутvalueотсутствует, индикатор выполнения находится в неопределённом состоянии; это означает, что работа продолжается, но предполагаемая длительность неизвестна.
Примечание: В отличие от элемента <meter>, минимальное значение всегда равно 0, а атрибут min не допускается для элемента <progress>.
Примечание: Псевдокласс :indeterminate можно использовать для выбора индикаторов выполнения с неопределённым состоянием. Чтобы перевести индикатор выполнения в неопределённое состояние после присвоения ему значения, необходимо удалить атрибут value с помощью element.removeAttribute('value').
Доступность
>Метки
В большинстве случаев при использовании <progress> следует предоставить доступную метку. Как и для любого элемента с role="progressbar", можно использовать стандартные атрибуты ARIA для задания меток: aria-labelledby или aria-label. При использовании <progress> можно также воспользоваться элементом <label>.
Примечание: Текст, размещённый между тегами элемента, не является доступной меткой; его рекомендуется использовать только как запасной вариант для старых браузеров, не поддерживающих этот элемент.
Примеры
<label> Uploading Document: <progress value="70" max="100">70 %</progress> </label> <!-- OR --> <br /> <label for="progress-bar">Uploading Document</label> <progress id="progress-bar" value="70" max="100">70 %</progress>
Результат
Описание определённой области
Если элемент <progress> показывает ход загрузки части страницы, используйте aria-describedby, чтобы связать его с состоянием, а для обновляемой области задайте aria-busy="true". После завершения загрузки удалите атрибут aria-busy.
Примеры
<div aria-busy="true" aria-describedby="progress-bar"> <!-- content is for this region is loading --> </div> <!-- ... --> <progress id="progress-bar" aria-label="Content loading…"></progress>
Результат
Примеры
<progress value="70" max="100">70 %</progress>
Результат
Техническая сводка
| Категории содержимого | Потоковое содержимое, фразовое содержимое, содержимое с меткой, осязаемое содержимое. |
|---|---|
| Допустимое содержимое | Фразовое содержимое, но среди дочерних элементов не должно быть элемента <progress>. |
| Пропуск тегов | Не допускается: обязательны и открывающий, и закрывающий теги. |
| Допустимые родители | Любой элемент, который допускает фразовое содержимое. |
| Неявная роль ARIA | progressbar |
| Допустимые роли ARIA | Роли role не допускаются |
| Интерфейс DOM | HTMLProgressElement |
Спецификации
| Спецификация |
|---|
| HTML> # the-progress-element> |
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
progress |
6 | 12 | 6["До Firefox 14 элемент<progress> ошибочно классифицировался как элемент формы и поэтому имел атрибут form. Это исправлено.", "Firefox предоставляет псевдоэлемент ::-moz-progress-bar, позволяющий стилизовать внутреннюю часть индикатора выполнения, отображающую объём уже выполненной работы."] |
11 | 6 | 18 | 6["До Firefox для Android 14 элемент<progress> ошибочно классифицировался как элемент формы и поэтому имел атрибут form. Это исправлено.", "Firefox для Android предоставляет псевдоэлемент ::-moz-progress-bar, позволяющий стилизовать внутреннюю часть индикатора выполнения, отображающую объём уже выполненной работы."] |
11 | 7Safari на iOS не поддерживает индикаторы выполнения с неопределённым состоянием (они отображаются как индикаторы с выполнением на 0%). |
1.0 | 4.4 | 7WebView на iOS не поддерживает индикаторы выполнения с неопределённым состоянием (они отображаются как индикаторы с выполнением на 0%). |
max |
6 | 12 | 6 | 11 | 6 | 18 | 6 | 11 | 7 | 1.0 | 4.4 | 7 |
value |
6 | 12 | 6 | 11 | 6 | 18 | 6 | 11 | 7 | 1.0 | 4.4 | 7 |
См. также
- Создание вертикальных элементов управления формами
<meter>:indeterminate-moz-orient::-moz-progress-bar::-webkit-progress-bar::-webkit-progress-value::-webkit-progress-inner-element
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress
