Как сделать полосу прогресса
Короткий ответ
Для прогресса есть тег progress:
<label>Uploading <progress value="70" max="100">70%</progress></label>Без атрибута value полоса становится «неопределённой» — бегущей анимацией, когда неизвестно, сколько осталось.
Оформление progress
Цвет меняет accent-color. Для полного контроля сбросьте вид через appearance: none и оформите части полосы — для разных браузеров они называются по-разному:
<style>
.bar { appearance: none; width: 240px; height: 12px; border: none; border-radius: 6px; background: gainsboro; overflow: hidden; }
.bar::-webkit-progress-bar { background: gainsboro; }
.bar::-webkit-progress-value { background: seagreen; border-radius: 6px; }
.bar::-moz-progress-bar { background: seagreen; border-radius: 6px; }
</style>
<progress class="bar" value="45" max="100">45%</progress>Полоса на div
Если нужен совсем свой вид, сделайте полосу из двух блоков и сообщите экранным дикторам значение через ARIA:
<div role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" aria-label="Step 3 of 5" style="height: 8px; background: lavender; border-radius: 4px;">
<div style="width: 60%; height: 100%; background: linear-gradient(90deg, mediumpurple, royalblue); border-radius: 4px;"></div>
</div>Частая ошибка
Использовать progress для значения, которое не является ходом процесса, — например, заполненность диска или рейтинг. Для таких измерений есть тег meter: он умеет подсвечивать низкие и высокие значения разными цветами.
Функции из этого ответа
- <progress> — Индикатор выполнения задачи: загрузки, шагов формы.
- <meter> — Шкала величины в известном диапазоне: заряд, заполненность, оценка.
- accent-color — Акцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.