Главная
HTML-тег <progress>
Характеристики
- Тип: строчный, интерактивный, семантический
- Назначение: Представляет прогресс выполнения задачи, отображая индикатор выполнения.
- Родители: Любые элементы, допускающие потоковый контент.
- Потомки: Текстовые узлы, описывающие прогресс.
- Глобальные атрибуты: все
- Атрибуты событий: все
Атрибуты
- value — Текущее значение прогресса.
- max — Максимальное значение прогресса.
Пример использования
<label for="file">Загрузка файла:</label>
<progress id="file" value="32" max="100">32%</progress>
Использование в JavaScript
// Обновление прогресса
const progressElement = document.querySelector('progress');
progressElement.value = 50;
Рекомендации по обеспечению доступности (a11y)
- Всегда указывайте атрибуты value и max для определения прогресса.
- Предоставляйте текстовое описание прогресса для пользователей вспомогательных технологий.
- Убедитесь, что прогресс обновляется динамически при изменении состояния.
Полезные ссылки