Атрибут class тега <progress>
Описание
Атрибут class для тега <progress> позволяет назначать один или несколько CSS-классов для стилизации элемента прогресс-бара. Классы применяются ко всему элементу <progress>.
<progress class="custom-progress success" value="65" max="100">65%</progress>
Основные возможности стилизации:
| CSS-псевдоэлемент | Описание | Пример |
|---|---|---|
::-webkit-progress-bar |
Стилизация фона прогресс-бара | background: #eee; |
::-webkit-progress-value |
Стилизация заполненной части | background: #4CAF50; |
::-moz-progress-bar |
Стилизация заполненной части (Firefox) | background: #4CAF50; |
Пример с CSS-стилизацией:
<style>
.custom-progress {
width: 100%;
height: 20px;
border-radius: 10px;
border: 1px solid #ddd;
}
.custom-progress::-webkit-progress-bar {
background: #f5f5f5;
border-radius: 10px;
}
.custom-progress.success::-webkit-progress-value {
background: linear-gradient(to right, #4CAF50, #8BC34A);
border-radius: 10px;
}
.custom-progress.warning::-webkit-progress-value {
background: linear-gradient(to right, #FFC107, #FF9800);
}
</style>
<progress class="custom-progress success" value="65" max="100">65%</progress>
<progress class="custom-progress warning" value="30" max="100">30%</progress>
Рекомендации:
- Используйте семантичные имена классов (например, "upload-progress")
- Создавайте модификаторы для разных состояний (success, warning, error)
- Всегда указывайте стили для всех браузеров (WebKit и Mozilla)
- Добавляйте fallback-стили для браузеров без поддержки псевдоэлементов
Пример с анимацией:
<style>
.animated-progress::-webkit-progress-value {
transition: width 0.5s ease;
}
</style>
<progress id="animated-bar" class="animated-progress" value="0" max="100">0%</progress>
<script>
document.getElementById('animated-bar').value = 75;
</script>
Поддержка браузеров:
- Chrome, Safari: полная поддержка через
::-webkit-префикс - Firefox: поддержка через
::-moz-progress-bar - Edge: поддержка через
::-webkit-(новые версии) - IE: ограниченная поддержка (только базовые стили)
Примечание: Для кросс-браузерной стилизации прогресс-баров рассмотрите использование JavaScript-решений или CSS-фреймворков, которые предоставляют унифицированный API для работы с элементами прогресса.