HTML тег <progress>html5

HTML теги

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

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

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

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

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

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<progress>html58.016.011.06.010.012.0

Атрибуты

АтрибутЗначениеОписание
maxhtml5numberОпределяет общий объем текущего процесса. Значение должно быть больше нуля. Отрицательные значения не допускаются.
valuehtml5numberУказывает уже выполненную часть процесса. Это должно быть положительное число с плавающей точкой между 0 и значением атрибута maxhtml5, или между 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> в HTML (состояние текущего процесса).

В следующем примере используются элементы <progress>html5 только с одним атрибутом valuehtml5, важным моментом в этом случае является использование значений между 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> (выполненная часть процесса).
Пример использования атрибута value HTML тега <progress> (выполненная часть процесса).

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



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

Элемент <progress>html5 считается новым в HTML 5.

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

Нет.

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

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

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

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

HTML теги