<progress>: Елемент – індикатор прогресу

{{HTMLSidebar}}

Елемент HTML <progress> (прогрес) виводить індикатор, що показує ступінь завершення завдання і, як правило, відображається у вигляді смуги прогресу.

Спробуйте його в дії

Атрибути

Цей елемент приймає глобальні атрибути.

max

Цей атрибут описує те, скільки роботи вимагає завдання, позначене елементом progress. Якщо атрибут max присутній, він повинен мати значення більше за 0 і бути дійсним числом з рухомою комою. Усталене значення — 1.

value

Цей атрибут задає те, скільки роботи виконано. Він повинен бути дійсним числом з рухомою комою між 0 і max, або між 0 і 1, якщо max пропущено. Якщо атрибут value відсутній, смуга прогресу є невизначеною; це означає, що дія триває, але немає вказівок на те, скільки часу вона буде тривати.

Примітка: На відміну від елемента <meter>, мінімальне значення завжди дорівнює 0, а атрибут min для елемента <progress> не дозволений.

Примітка: Псевдоклас :indeterminate можна використовувати для збігу з невизначеними смугами прогресу. Щоб змінити смугу прогресу на невизначену після того, як їй надано значення, необхідно видалити атрибут value за допомогою element.removeAttribute('value').

Приклади

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

Результат

Занепокоєння щодо доступності

Підписування

У більшості випадків при використанні <progress> слід надати доступний підпис. Окрім того, що можна використовувати стандартні підписні атрибути ARIA aria-labelledby та aria-label, як і на будь-якому елементі з role="progressbar", при використанні <progress> також можна використовувати елемент <label>.

Примітка: Текст, розміщений між тегами елемента, не є доступним підписом, він рекомендований лише як запасний вміст для старих браузерів, які не підтримують <progress>.

Приклади

<label>
  Відвантаження документа: <progress value="70" max="100">70 %</progress>
</label>

<!-- АБО -->
<br />

<label for="progress-bar">Відвантаження документа</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

Результат

Описування певного регіону

Якщо елемент <progress> описує прогрес завантаження розділу сторінки, слід використовувати атрибут aria-describedby, щоб вказати статус, і задати aria-busy="true" на розділі, який оновлюється, видаливши атрибут aria-busy, коли завантаження завершено.

Приклади

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- вміст для цього регіона – завантажується -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Завантаження вмісту…"></progress>

Результат

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• Створення вертикальних формових елементів
• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element