Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
<button>
<datalist>
<fieldset>
<input>
События
button
checkbox
color
date
file
hidden
number
password
radio
range
reset
submit
text
<keygen>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
Тег <progress>
Тег <progress> является индикатором хода выполнения задачи. Например, загрузки файла или процента проголосовавших к определенному времени.
Атрибуты тега <progress>
- value
- Текущее значение.
- max
- Максимальное значение (по умолчанию 1).
Должно выполняться неравенство:
- 0 ≤ value ≤ max
Числовое значение value можно менять с помощью JavaScript.
Для тега <progress> также доступны общие атрибуты и атрибуты обработки событий.
Внешний вид элемента <progress> зависит от операционной системы и браузера.
<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: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
border-radius: 9px;
}
.gradient-progressbar progress::-moz-progress-bar {
background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
border-radius: 9px;
}
</style>
<div class="gradient-progressbar">
<progress value="0.5">Выполнено 50% работы</progress>
</div>
РЕЗУЛЬТАТ:
.
Прокомментировать/Отблагодарить