HTML-тег <progress>

HTML-тег <progress> используется для отображения хода выполнения задачи, например загрузки файла, выгрузки данных или заполнения формы. Он визуально отображает ход выполнения задачи и представляет собой самостоятельный элемент со встроенной семантикой для обеспечения доступности.

Тег <progress> работает с двумя атрибутами: value (текущий прогресс) и max (общая работа или максимальное значение).

Базовый синтаксис HTML-тега <progress>

Базовая структура тега <progress> следующая: 

<progress value="current-value" max="maximum-value"></progress>

Атрибут value отображает текущий прогресс, а атрибут max определяет общую работу. Если атрибут max опущен, его значение по умолчанию равно 1. Прогресс выражается как доля от value / max .

Пример индикатора выполнения

Вот пример индикатора выполнения, отображающего завершение загрузки файла: 

<!DOCTYPE html>
<html>
    <body>
        <h2>File Download Progress</h2>
        <progress value="50" max="100"></progress>
        <p>50% Complete</p>
    </body>
</html>
Пример Progress Bar с использованием тега прогресса

Объяснение: Индикатор выполнения показывает, что задача выполнена на 50%, поскольку value равен 50, а max равен 100.

Атрибуты HTML-тега <progress>

  • Значение: определяет текущий ход выполнения задачи. Значение должно быть числом, большим или равным 0.
  • Макс.: определяет максимальное значение или общий объём работы для задачи. Если значение не указано, по умолчанию используется значение 1.
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Например, если индикатор выполнения заполнен наполовину: 

<progress value="5" max="10"></progress>

Это отобразит полосу прогресса, на которой выполнено 5/10(50%).

Стилизация тега <progress> с помощью CSS

Вы можете стилизовать тег <progress> чтобы настроить его внешний вид: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            progress {
                width: 100%;
                height: 20px;
                border: 1px solid #007BFF;
                border-radius: 5px;
            }
            progress::-webkit-progress-bar {
                background-color: #f3f3f3;
            }
            progress::-webkit-progress-value {
                background-color: #007BFF;
            }
            progress::-moz-progress-bar {
                background-color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled Progress Bar</h2>
        <progress value="70" max="100"></progress>
        <p>70% Complete</p>
    </body>
</html>
Оформление прогресса Тег с помощью CSS

Результат: полоса прогресса имеет стилизованную границу, закругленные углы и пользовательский цвет для заполненной области.

Динамические обновления с помощью JavaScript

Тег <progress> можно обновлять динамически с помощью JavaScript: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Progress Bar</h2>
        <progress id="progressBar" value="0" max="100"></progress>
        <p>Progress: <span id="progressValue">0%</span></p>
        <button onclick="updateProgress()">Increase Progress</button>

        <script>
            function updateProgress() {
                const progressBar = document.getElementById('progressBar');
                const progressValue = document.getElementById('progressValue');
                if(progressBar.value < progressBar.max) {
                    progressBar.value += 10;
                    progressValue.textContent = progressBar.value + '%';
                }
            }
        </script>
    </body>
</html>

Пояснение: Нажатие кнопки «Увеличить прогресс» увеличивает полосу прогресса на 10%, пока она не достигнет 100%.

Практическое применение тега <progress>

  • Загрузка файлов: отображение хода загрузки в форме или файловом менеджере.
  • Загрузки: отображают ход загрузки или установки файла.
  • Завершение задачи: визуализируйте ход выполнения задачи в приложениях или рабочих процессах.
  • Игровая механика: представляет собой шкалу здоровья, очки опыта или прогресс уровня в играх.