Тег <progress>

Тег <progress> является индикатором хода выполнения задачи. Например, загрузки файла или процента проголосовавших к определенному времени.

Атрибуты тега <progress>

value

Текущее значение.

max

Максимальное значение (по умолчанию 1).

Должно выполняться неравенство:

• 0 ≤ value ≤ max

Числовое значение value можно менять с помощью JavaScript.

Для тега <progress> также доступны общие атрибуты и атрибуты обработки событий.

Внешний вид элемента <progress> зависит от операционной системы и браузера (Chrome 8+, IE 10+, Firefox 16+, Safari 6+, Opera 11+).

<style type="text/css">
    .default-progressbar progress {
        margin-top: 10px;
        height: 25px;
        width: 100%;
    }
</style>
<div class="default-progressbar">
    <progress value="0">Выполнено 0% работы</progress>
    <progress value="0.75">Выполнено 75% работы</progress>
</div>

Браузеры, не отображающие тег <progress> выводят текст из контейнера <progress>...</progress>.

CSS-стили элемента <progress> можно изменять. Для этого сначала надо отменить стили браузеров по умолчанию.

progress {
/* Отключаем стиль (как правило, не требуется, но на всякий случай)  */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* Убираем границы по умолчанию в Firefox и Opera */
border: none;
/* Чтобы фоновое изображение в Safari работало, как надо */
background-size: auto;
}

Изменение цвета фона элемента <progress>

/* Firefox  */
progress {
background: #fac;
}
/* Chrome */
progress::-webkit-progress-bar {
background: #fac;
}

Изменение цвета значения элемента <progress>

Opera 11 и 12 не допускает изменение цвета индикатора – он остается зеленым.

/* IE10 */
progress {
color: #e0a;
}
/* Firefox */
progress::-moz-progress-bar {
background: #e0a;
}
/* Chrome */
progress::-webkit-progress-value {
background: #e0a;
}

Градиент в качестве значения <progress>

Для Internet Explorer цвет значения <progress> задается свойством color, т.е. никакого градиента для IE не получится :(

<style type="text/css">
    .gradient-progressbar progress {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: none;
        margin-top: 10px;
        background: #eee;
        border: 0;
        width: 100%;
        height: 25px;
        border-radius: 9px;
        color: #9c3;
    }
    .gradient-progressbar progress::-webkit-progress-bar {
        background: #eeeeee;
        border-radius: 9px;
    }
    .gradient-progressbar progress::-webkit-progress-value {
        background: #cf9;
        background: -moz-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf9), color-stop(100%,#9c3));
        background: -webkit-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: -o-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: -ms-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf9', endColorstr='#9c3', GradientType=0);
        border-radius: 9px;
    }
    .gradient-progressbar progress::-moz-progress-bar {
        background: #cf9;
        background: -moz-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf9), color-stop(100%,#9c3));
        background: -webkit-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: -o-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: -ms-linear-gradient(top, #cf9 0%, #9c3 100%);
        background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf9', endColorstr='#9c3', GradientType=0);
        border-radius: 9px;
    }
</style>
<div class="gradient-progressbar">
    <progress value="0.5">Выполнено 50% работы</progress>
</div>