HTML-тег <progress>
Тег <progress> — один из элементов HTML5. Он используется для отображения прогресса выполнения задачи (полоса прогресса). Динамически изменяющиеся значения полосы прогресса должны задаваться с помощью скриптов (JavaScript).
Внешний вид элемента может отличаться в зависимости от браузера и операционной системы.
Мы рекомендуем использовать тег <meter> для отображения индикатора (например, релевантности результата запроса).
Синтаксис
Тег <progress> используется в паре. Содержимое записывается между открывающим (<progress>) и закрывающим (</progress>) тегами.
Пример тега HTML <progress>:
Тег HTML <progress>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span>Loading:</span>
<progress value="35" max="100" aria-label="Loading progress"></progress>
</body>
</html>Результат
Полоса прогресса
Полоса прогресса может быть неопределённой или определённой.
Неопределённую полосу прогресса стилизовать проще, так как у неё нет атрибута value. Её можно оформить с помощью CSS-отрицания :not().
Определённая полоса прогресса выбирается селектором progress[value]. Добавьте размеры для полосы прогресса с помощью CSS-свойств width и height и установите appearance в значение none:
Стилизация полос прогресса
WebKit/Blink (Chrome/Safari/Opera)
Chrome, Safari и последняя версия Opera (16+) относятся к этой категории. Оформление элемента <progress> можно выполнить с помощью -webkit-appearance: progress-bar.
Установите -webkit-appearance: none;, чтобы сбросить стили по умолчанию.
Пример полосы прогресса
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}Пример определённого состояния полосы прогресса:
Пример определённой полосы прогресса:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="30" max="100" aria-label="Loading progress"></progress>
</body>
</html>После этого могут возникнуть проблемы, поскольку разные браузеры предоставляют отдельные псевдоэлементы для стилизации полосы прогресса. Чтобы решить эту проблему, можно использовать запасные варианты.
WebKit/Blink предоставляет два псевдоэлемента:
::-webkit-progress-bar, который стилизует контейнер элемента прогресса.::-webkit-progress-value, который стилизует значение внутри полосы прогресса.
Стилизуйте ::-webkit-progress-bar с помощью различных свойств CSS:
Пример полосы прогресса
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}Стилизуйте ::-webkit-progress-value, который является самой полосой, с помощью нескольких градиентных фонов для разных целей. Для градиентов используйте префикс -webkit-:
webkit-progress-value
progress[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
border-radius: 4px;
background-size: 20px 15px, 100% 100%, 100% 100%;
}Пример использования тега HTML <progress> со свойствами CSS:
Пример тега HTML <progress> со свойствами CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}
progress[value]::-webkit-progress-bar {
background-color: #cccccc;
border-radius: 4px;
}
progress[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
border-radius: 4px;
background-size: 20px 15px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="55" max="100" aria-label="Loading progress"></progress>
</body>
</html>Firefox
Используя appearance: none, мы можем убрать стандартный эффект bevel и emboss. Однако в Firefox при этом остаётся небольшая рамка, которую можно удалить с помощью border: none. Это также решает проблему с рамкой в Opera 12.
Пример полосы <progress> в Firefox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
width: 200px;
height: 15px;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="55" max="100" aria-label="Loading progress"></progress>
</body>
</html>Firefox предоставляет один псевдоэлемент (::-moz-progress-bar), который можно использовать для стилизации значения полосы прогресса. Иными словами, в Firefox мы не можем стилизовать фон контейнера.
Тег HTML <progress> — Firefox
progress[value]::-moz-progress-bar {
background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
background-size: 35px 20px, 100% 100%, 100% 100%;
}Firefox не поддерживает псевдоэлементы ::before или ::after на полосе прогресса и не позволяет использовать анимацию CSS3 keyframe на полосе прогресса, поэтому возможности здесь ограничены.
Пример тега HTML <progress> для Firefox:
Пример тега HTML <progress> для Firefox:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value]::-moz-progress-bar {
background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%,
rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-moz-linear-gradient( top, rgba(255, 255, 255, 0.25),
rgba(0, 0, 0, 0.25)),
-moz-linear-gradient( left, #ff00f7, #4e922a);
background-size: 35px 20px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="35" max="100" aria-label="Loading progress"></progress>
</body>
</html>Пример интересного использования полосы прогресса при прокрутке страницы!
Вот пример того, как создать полосу прогресса, показывающую, насколько далеко вы прокрутили страницу:
пример того, как создать полосу прогресса, показывающую, насколько далеко вы прокрутили страницу
<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #ddd;
}
#progress-bar-fill {
height: 100%;
background-color: blue;
width: 0%;
}
</style>
</head>
<body>
<div id="progress-bar">
<div id="progress-bar-fill"></div>
</div>
<h1>Scrollable Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<script>
window.addEventListener("scroll", function () {
var progressBarFill = document.getElementById("progress-bar-fill");
var scrollPosition = window.scrollY;
var totalHeight = document.body.scrollHeight - window.innerHeight;
var percentage = (scrollPosition / totalHeight) * 100;
progressBarFill.style.width = percentage + "%";
});
</script>
</body>
</html>В этом примере у нас есть элемент div с фиксированным позиционированием и id progress-bar, который служит контейнером для полосы прогресса. Внутри этого контейнера находится ещё один элемент div с id progress-bar-fill, который служит самой полосой прогресса.
Мы использовали CSS, чтобы задать начальную ширину и высоту полосы прогресса, а также цвета фона для полосы прогресса и её заполнения.
Мы также добавили обработчик события JavaScript, который отслеживает событие scroll у объекта window. Когда пользователь прокручивает страницу, мы вычисляем положение прокрутки и общую высоту страницы, а затем рассчитываем процент прокрутки страницы. Мы обновляем свойство width элемента progress-bar-fill, чтобы отразить этот процент, тем самым обновляя полосу прогресса.
Вы можете скопировать этот код в новый HTML-файл и открыть его в браузере, чтобы посмотреть, как это выглядит. По мере прокрутки страницы полоса прогресса будет обновляться, показывая, насколько далеко вы прокрутили страницу. Вы можете настроить высоту и цвет полосы прогресса в соответствии со своими потребностями.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| max | number | Определяет максимальное значение текущего процесса. Значение может быть положительным числом больше 0. |
| value | number | Определяет размер выполненной задачи. Значение может быть числом от 0 до числа, указанного в атрибуте max, или числом в диапазоне от 0 до 1, если атрибут max не указан. |
Тег <progress> также поддерживает глобальные атрибуты и атрибуты событий.
Практика
Что представляет собой HTML-тег progress?