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