Основний вміст

  • <body>

Тег <progress>

Internet Explorer Chrome Opera Safari Firefox Android iOS
10.0 6.0+ 11.0+ 5.2+ 6.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Опис

Використовується для відображення прогресу завершення завдання. Зміна значення відбувається через JavaScript.

Синтаксис

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

Атрибути

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

Закриваючий тег

Обов'язковий.

Приклад

HTML 5IE 10CrOpSa 5.2Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>progress</title>
 </head> 
 <body>
  <p>Будь ласка, зачекайте, фотографії завантажуються.</p>
  <progress max="100" value="25">
    Завантажено на <span id="value">25</span>%
  </progress>
 </body>
</html>

Результат прикладу в браузері Opera показаний на рис. 1.

Використання тега <progress>

HTML5
SEO текст: Тег progress використовується для відображення прогресу завершення завдання на веб-сторінці. Дізнайтеся про синтаксис, атрибути та приклади використання цього тега.

Часті запитання

  • Q: Як працює тег <progress> в HTML?

    A: Елемент <progress> визначає прогрес виконання завдання, яке може бути відображено як смуга прогресу.

  • Q: Як встановити початкове значення для тегу <progress>?

    A: Початкове значення встановлюється за допомогою атрибуту 'value'. Наприклад, <progress value='50' max='100'></progress> встановить прогрес на 50%.

  • Q: Як змінити колір прогресу в тезі <progress>?

    A: Колір прогресу можна змінити за допомогою CSS. Наприклад, встановивши background-color для елементу <progress>.

  • Q: Як визначити максимальне значення для тегу <progress>?

    A: Максимальне значення встановлюється за допомогою атрибуту 'max'. Наприклад, <progress value='25' max='100'></progress> буде показувати прогрес на 25% від максимального значення 100.

  • Q: Як зробити тег <progress> адаптивним до ширини контейнера?

    A: Для зроблення тегу <progress> адаптивним до ширини контейнера використовують CSS властивість 'width: 100%;'.