Тег <progress>
Описание
Тег <progress> создаёт индикатор выполнения задачи, отображающий прогресс операции. Это строчный элемент, который визуализирует ход выполнения процесса в виде заполняющейся шкалы.
<progress value="70" max="100">70%</progress>
<!-- Определённый прогресс -->
<progress value="25" max="50">50%</progress>
<!-- Неопределённый прогресс -->
<progress>Загрузка...</progress>
<!-- Связь с JavaScript -->
<progress id="fileProgress" value="0" max="100"></progress>
Ключевые особенности:
- Поддерживает два состояния: определённый и неопределённый прогресс
- Без атрибута
valueотображается как индикатор ожидания - Текст внутри используется как fallback для старых браузеров
- Семантически обозначает прогресс выполнения
- Стилизуется через CSS (но ограниченно в разных браузерах)
<style>
progress {
width: 300px;
height: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
/* Стиль для WebKit/Blink */
progress::-webkit-progress-bar {
background: #f0f0f0;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: linear-gradient(to right, #4CAF50, #8BC34A);
border-radius: 10px;
}
/* Стиль для Firefox */
progress::-moz-progress-bar {
background: linear-gradient(to right, #4CAF50, #8BC34A);
border-radius: 10px;
}
</style>
<progress value="65" max="100">65%</progress>
Рекомендации по использованию:
- Используйте для отображения хода загрузки, обработки данных
- Для неопределённых процессов оставляйте без
value - Всегда указывайте текстовую альтернативу внутри тега
- Не используйте для измерений (применяйте
<meter>) - Обновляйте значение через JavaScript для динамических процессов
<progress id="pageLoader" value="0" max="100"></progress>
<script>
const loader = document.getElementById('pageLoader');
let progress = 0;
const interval = setInterval(() => {
progress += 5;
loader.value = progress;
if(progress >= 100) clearInterval(interval);
}, 300);
</script>
Тег <progress> предоставляет нативную, семантически правильную возможность отображения прогресса выполнения операций, улучшая пользовательский опыт при работе с длительными процессами.
Атрибуты
| value | Текущее значение прогресса |
| max | Максимальное значение прогресса |
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 10.0 | 6.0 | 11.0 | 6.0 | 5.2 |