Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту



PHP Поиск




Наша группа в телеграмм для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Тег <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>.

РЕЗУЛЬТАТ:

Выполнено 0% работы Выполнено 75% работы

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;
}

РЕЗУЛЬТАТ:

Выполнено 25% работы
Градиент в качестве значения <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>

РЕЗУЛЬТАТ:

Выполнено 50% работы

.

Популярное:


Содержание: