Пример
Показать индикатор выполнения:
<label for="file">Скачивание индикатор:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Попробуйте сами »
Определение и использование <progress>
Тег <progress> представляет собой индикатор выполнения задачи.
Совет: Всегда добавляйте тег <label> для лучших практик доступности!
Совет: Используйте тег <progress> в сочетании с JavaScript для отображения индикатора выполнения задачи.
Примечание: Тег <progress> не подходит для представления датчика (например, использование дискового пространства или релевантность результата запроса). Чтобы представить датчик, используйте тег <meter>.
Поддержка браузеров <progress>
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <progress> | 8.0 | 10.0 | 16.0 | 6.0 | 11.0 |
Атрибуты <progress>
| Атрибут | Значение | Описание |
|---|---|---|
| max | number | Указывает, сколько работы требуется для выполнения задачи в целом. Значение по умолчанию равно 1 |
| value | number | Указывает, какая часть задачи была выполнена |
Глобальные атрибуты <progress>
Тег <progress> также поддерживает Глобальные атрибуты в HTML.
События атрибутов <progress>
Тег <progress> также поддерживает События атрибутов в HTML.
Связанные страницы <progress>
HTML DOM Справочник: Объект Progress
Настройки CSS по умолчанию <progress>
Нет.