Атрибут | Описание |
---|---|
max | Максимальное значение прогресса (сколько всего надо сделать) |
value | Текущее значение прогресса(сколько уже выполнено) |
position | Возвращает текущую позицию элемента <progress> - результат деления текущего значения на максимальное значение. |
labels | Возвращает список ярлыков (label) элементов <progress> (если они есть). |
Элемент <progress>
является новым в HTML5 и используется для представления хода выполнения задачи:
<progress value = "22" max = "100"> </ progress>
Это создает бар, заполненный 22%
Свойства прогресса могут быть описаны с помощью переключателя progress[value]
.
В этом примере индикатор прогресса имеет ширину 250 пикселей и высоту 20 пикселей.
progress[value] {
width: 250px;
height: 20px;
}
Некоторые стили прогресса могут быть довольно трудоемкими.
Эти браузеры используют селектор -webkit-appearance
для создания элемента прогресса. Чтобы переопределить его, мы можем сбросить внешний вид.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Теперь мы можем создать стиль контейнера:
::-webkit-progress-bar {
background-color: green;
}
И изменить стиль полосы выполнения:
::-webkit-progress-value{
background-color: red;
}
Firefox стилизует индикатор выполнения немного по-другому. Мы должны использовать следующие стили:
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox также отображает границы */
}
::-moz-progress-bar {
background-color: red;
}
Internet Explorer 10+ поддерживает элемент прогресса. Однако он не поддерживает свойство background-color
. Вместо него вам нужно использовать свойство color
:
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* удаляем границы в Firefox */
width: 250px;
height: 20px;
color: blue;
}
Для браузеров, которые не поддерживают элемент progress
, вы можете использовать обходной путь:
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Браузеры, поддерживающие тег progress
, будут игнорировать div
, вложенный внутри. Устаревшие браузеры, которые не могут идентифицировать тег progress
, будут отображать div
.