HTMLProgressElement: свойство value

Базовая Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство value интерфейса HTMLProgressElement представляет текущий прогресс элемента <progress>.

Значение

Число с плавающей точкой. Если значение max не задано для полосы прогресса, то значение находится в диапазоне от 0,0 до 1,0. Если значение max задано, то значение находится в диапазоне от 0 до max.

Если свойство value не задано для объекта HTMLProgressElement, то полоса прогресса остается неопределённой.

Примеры

HTML

Determinate Progress bar: <progress id="pBar"></progress> <span>0</span>%
<br />
Indeterminate Progress bar: <progress></progress>

JavaScript

const pBar = document.getElementById("pBar");
const span = document.getElementsByTagName("span")[0];

pBar.max = 100;
pBar.value = 0;

setInterval(() => {
  pBar.value = pBar.value < pBar.max ? pBar.value + 1 : 0;

  span.textContent = Math.trunc(pBar.position * 100);
}, 100);

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

Спецификация
HTML # dom-progress-value

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`value`	6	12	6	≤12.1	6	18	6	≤12.1	6	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement/value