Элемент progress

Атрибут Описание
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.