Атрибут value тега <progress>
Описание
Атрибут value для тега <progress> определяет текущее значение прогресс-бара. Это число должно находиться между 0 и значением атрибута max (или 1.0, если max не указан).
<progress value="70" max="100">70%</progress>
Основные характеристики:
| Аспект | Описание |
|---|---|
| Тип значения | Число с плавающей точкой |
| Диапазон | 0 ≤ value ≤ max (по умолчанию max=1.0) |
| Обязательность | Нет (но без value прогресс-бар будет в неопределенном состоянии) |
Примеры разных состояний:
<!-- Определенный прогресс -->
<progress value="0.5">50%</progress>
<!-- Неопределенный прогресс -->
<progress>Загрузка...</progress>
<!-- С пользовательским максимумом -->
<progress value="3" max="10">3 из 10</progress>
Динамическое обновление через JavaScript:
<progress id="file-progress" value="0" max="100">0%</progress>
<script>
// Обновление значения каждые 500ms
const progressBar = document.getElementById('file-progress');
let progress = 0;
const interval = setInterval(() => {
progress += 5;
progressBar.value = progress;
progressBar.textContent = progress + '%';
if (progress >= 100) clearInterval(interval);
}, 500);
</script>
Рекомендации:
- Всегда указывайте текстовое содержимое внутри тега для доступности
- Для файловых загрузок обновляйте значение по мере получения данных
- Используйте атрибут
maxдля нестандартных диапазонов - Стилизуйте через CSS для соответствия дизайну сайта
Стилизация через CSS:
<style>
progress {
width: 100%;
height: 20px;
border-radius: 10px;
}
progress::-webkit-progress-bar {
background: #f0f0f0;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: linear-gradient(to right, #4CAF50, #8BC34A);
border-radius: 10px;
}
</style>
<progress value="65" max="100">65%</progress>
Примечание: Хотя элемент <progress> хорошо поддерживается современными браузерами, для сложных анимаций или нестандартных индикаторов прогресса рассмотрите использование SVG или Canvas-решений.