: Элемент индикатора выполнения — HTML

**HTML-элемент <progress> **отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).

Категории контентаПотоковый контент, фразовый контент, контент, ассоциированный с label, явный контент.
Допустимый контентФразовый контент, но среди его потомков не должно быть элемента <progress>.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Допустимые родителиЛюбой элемент, который принимает фразовый контент.
Допустимые ARIA-ролиНет
DOM-интерфейсHTMLProgressElement (en-US)

Этот элемент включает в себя глобальные атрибуты.

max

Этот атрибут описывает сколько затрат требует задача, указанная элементом progress. Атрибут max, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.

value

Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max, или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.

Примечание:

Минимальное значение всегда 0, а атрибут min недопустим для прогресс-элемента. Вы можете использовать свойство CSS -moz-orient (en-US), чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.

Примечание: Псевдокласс :indeterminate может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute("value")

<progress value="70" max="100">70 %</progress>

Result

Для Windows 7, результат выполнения будет выглядеть так :

Дополнительные примеры

Смотрите -moz-orient (en-US).

Specification
HTML Standard
# the-progress-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • <meter>
  • :indeterminate
  • -moz-orient (en-US)
  • ::-moz-progress-bar
  • ::-ms-fill
  • ::-webkit-progress-bar     (en-US)
  • ::-webkit-progress-value (en-US)
  • ::-webkit-progress-inner-element (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

| HTML | WebReference

Используется для отображения прогресса завершённости задачи. Изменение значения происходит через JavaScript.

Вид элемента зависит от браузера и операционной системы и может довольно сильно различаться между собой.

Синтаксис

<progress value="<число>" max="<число>">
Текст
</progress>

Атрибуты

value
Текущее значение прогресса.
max
Максимальное значение прогресса.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>progress</title> </head> <body> <p>Пожалуйста, подождите, фотографии загружаются.
</p> <progress max=»100″ value=»25″> Загружено на <span>25</span>% </progress> </body> </html>

Результат примера показан на рис. 1.

Использование <progress>

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

10126115.26
2.26117
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

  • Продвинутая семантика и доступность
  • Шкала прогресса

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

: Элемент индикатора выполнения — HTML: язык гипертекстовой разметки

HTML-элемент

отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде индикатора выполнения.

Категории контента Потоковое содержание, фразовый контент, маркируемый контент, ощутимое содержание.
Разрешенный контент Фразовое содержание, но не должно быть элемент среди своих потомки.
Отсутствие тега Нет, начальный и конечный теги обязательны.
Разрешенные родители Любой элемент, принимающий фразовое содержание.
Неявная роль ARIA индикатор выполнения
Разрешенные роли ARIA № роль разрешено
Интерфейс DOM HTMLProgressElement

Этот элемент включает глобальные атрибуты.

макс.

Этот атрибут описывает, сколько работы требует задача, указанная элементом

progress . Атрибут max , если он присутствует, должен иметь значение больше 0 и быть допустимым числом с плавающей запятой. Значение по умолчанию – 9. 0004 1 .

значение

Этот атрибут указывает, какая часть задачи была выполнена. Это должно быть действительное число с плавающей запятой от 0 до max или от 0 до 1 , если max опущено. Если атрибут value отсутствует, индикатор выполнения не определен; это указывает на то, что действие продолжается без указания того, сколько времени оно займет.

Примечание: В отличие от элемента , минимальное значение всегда равно 0, а атрибут min не разрешен для элемента .

Примечание: Псевдокласс :неопределенный можно использовать для сопоставления с неопределенными индикаторами выполнения. Чтобы изменить индикатор выполнения на неопределенный после присвоения ему значения, вы должны удалить атрибут значения с помощью element. removeAttribute('value') .

 
 70 %

Результат

Маркировка

В большинстве случаев при использовании <прогресс> следует указать доступную метку. Хотя вы можете использовать стандартные атрибуты маркировки ARIA aria-labelledby или aria-label , как и для любого элемента с role="progressbar" , при использовании вы также можете использовать

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

Примеры 
 




70 %
Результат

Описание конкретной области

Если элемент описывает ход загрузки раздела страницы, используйте aria-describedby , чтобы указать на статус, и установите aria-busy=" true" в обновляемом разделе, удаляя атрибут aria-busy после завершения загрузки.

Примеры
Результат
Спецификация
Стандарт HTML
# the-progress-element

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • <метр>
  • :неопределенный
  • -моз-ориент
  • ::-moz-прогресс-бар
  • ::-webkit-прогресс-бар
  • ::-webkit-прогресс-значение
  • ::-вебкит-прогресс-внутренний элемент

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.
Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

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

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


Пример

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


32%

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

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

Тег представляет выполнение задачи.

Совет: Всегда добавляйте тег

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

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

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

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

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

Элемент
<прогресс> 8,0 10,0 16,0 6,0 11,0

Атрибуты

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

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

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

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

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

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

Ссылка HTML DOM: Progress Object

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

Нет.

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


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 7

Лучшие ссылки
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

901 44 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

No related posts.