HTML тег <progress>

Значение и применение

Тег <progress> html5 предоставляет обратную связь пользователю, сообщая о состоянии текущего процесса. Элемент отображает какая часть задачи уже выполнена.

У тега <progress> html5 используется два основных атрибута это max html5 , который определяет общий объем текущего процесса (его значение должно быть положительным) и value html5 , который указывает уже выполненную часть. Данный тег не поддерживается браузером Internet Explorer версии 9 и ниже.

Тег <progress> html5 не подходит для отображения таких задач как, к примеру, использование дискового пространства или релевантность поискового запроса. Для этих целей в HTML предназначен тег <meter> html5 .

Текст, размещенный внутри элемента <progress> html5 будет отображен только теми браузерами, которые не имеют поддержки данного элемента.

Обращаю Ваше внимание, что необходимо обязательно указывать закрывающий элемент </progress>.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<progress>	8.0	16.0	11.0	6.0	10.0	12.0

Атрибуты

Атрибут	Значение	Описание
max	number	Определяет общий объем текущего процесса. Значение должно быть больше нуля. Отрицательные значения не допускаются.
value	number	Указывает уже выполненную часть процесса. Это должно быть положительное число с плавающей точкой между 0 и значением атрибута max, или между 0 и 1 если атрибут не используется.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использование элемента <progress> в HTML</title>
	</head>
	<body>
		<p>Изучено материала:</p>
		<progress value = "25" max = "100"> </progress>
	</body>
</html>

Результат нашего примера:

Пример использование элемента <progress> в HTML (состояние текущего процесса).

В следующем примере используются элементы <progress> html5 только с одним атрибутом value html5 , важным моментом в этом случае является использование значений между 0 и 1:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута value HTML тега <progress></title>
	</head>
	<body>
		 0.3 - <progress value = "0.3" ></progress></br>
		 0.5 - <progress value = "0.5" ></progress></br>
		 0.7 - <progress value = "0.7" ></progress>
	</body>
</html>

Результат нашего примера:

Пример использования атрибута value HTML тега <progress> (выполненная часть процесса).

Если для элемента <progress> html5 не указывать атрибут value html5 , то большинство браузеров будут отображать анимацию:

Отличия HTML 4.01 от HTML 5

Элемент <progress> html5

считается новым в HTML 5.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".

HTML теги