Тег <progress>

Тег <progress> (укр. — “індикатор прогресу”) використовується для відображення прогресу виконання якоїсь дії, наприклад, завантаження файлу, заповнення форми чи обробки даних. Його можна використовувати як із реальними значеннями, так і як невизначений індикатор (коли тривалість виконання невідома).

Атрибути

Специфічні атрибути

  • value — задає поточне значення прогресу. Це число між 0 і значенням атрибута max. Якщо не вказано — прогрес вважається невизначеним (аналог “loading…”). Наприклад:
<progress value="40" max="100"></progress>
  • max — визначає максимальне значення прогресу. За замовчуванням — 1. Використовується разом із value для обчислення відсотка заповнення. Наприклад:
<progress value="75" max="150"></progress>

Глобальні атрибути

Тег <progress> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор елемента. Наприклад:
<progress id="uploadProgress" value="20" max="100"></progress>
  • class — для застосування стилів через CSS. Наприклад:
<progress class="download-bar" value="50" max="100"></progress>
  • style — інлайн-стилі. Наприклад:
<progress value="70" max="100" style="width: 300px;"></progress>
  • title — підказка при наведенні курсору. Наприклад:
<progress value="30" max="100" title="30% виконано"></progress>
  • lang — вказує мову контенту (хоча сам тег зазвичай не містить тексту). Наприклад:
<progress value="40" max="100" lang="uk"></progress>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання progress</title>
    <style>
        .download-bar {
            width: 300px;
            height: 20px;
        }
    </style>
</head>
<body>
    <h2>Завантаження файлу:</h2>

    <progress class="download-bar" value="60" max="100"></progress>

    <p>60% завершено</p>
</body>
</html>

Додаткові моменти

  • Якщо value не вказано, відображається анімація невизначеного прогресу (індикатор активності).
  • Візуальне відображення може відрізнятися в різних браузерах — часто потрібна додаткова стилізація.
  • <progress> не призначений для складних анімацій — для цього краще використовувати кастомні компоненти (наприклад, із використанням SVG, Canvas або сторонніх бібліотек).
  • Доступний для скрінрідерів — підтримує роль progressbar для покращеної доступності.
  • Підтримується всіма сучасними браузерами.