От автора: В HTML5 появился новый элемент – progress, который работает также, как и обычная полоса загрузки (progress bar), и используется для того, чтобы визуализировать процесс выполнения определенной задачи, например, загрузки данных на сервер.
В данной статье рассматривается пример того, как добавлять подобные элементы на страницу и стилизовать их; также в данной статье показан метод изменения значений у таких элементов с помощью JavaScipt.
Добавление полосы загрузки на страницу
Чтобы добавить полосу загрузки на страницу, необходимо использовать элемент progress. Значения полосы загрузки определяются с помощью атрибутов value и max. Вот пример:
|
1 |
<progress value="23" max="100"></progress> |
Поскольку в базовой реализации используются стандартные формы, то визуальное представление данного элемента зависит от платформы. Ниже приведен пример того, как полоса загрузки выглядит в Windows 7.
Как уже было сказано, элемент progress является обычной полосой загрузки в HTML5 и, проще говоря, отображает прогресс выполнения какой-либо задачи. При этом атрибут max определяет максимальное значение, требуемое для выполнения задачи, а атрибут value определяет, сколько уже выполнено на текущий момент.
Браузерная поддержка: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.
Стилизация полосы загрузки
Теперь давайте определим стили для полосы загрузки, чтобы она одинаково выглядела на всех платформах. Чтобы добавить стили для элемента progress, мы просто используем селектор тега. В следующем примере мы изменяем цвет фона, убираем границы и скругляем углы у данного элемента.
|
1 2 3 4 5 6 7 |
progress { background-color: #00FEFD; border-radius: 10px; border: 0; height: 20px; width: 200px; } |
Но здесь кроется проблема, т.к. каждый браузер немного по-своему отображает данные стилевые правила:
В Firefox стили затрагивают только полосу загрузки, а индикатор загрузки, отображающий текущее значение, остается неизменным.
В Chrome и Safari данные стили совсем не применяются, за исключением стилей с вендорным префиксом -webkit-.
Итак, в Chrome и Safari внешний вид элемента progress может быть изменен благодаря использованию псевдо-классов: -webkit-progress-bar и -webkit-progress-value. Первый из них используется для определения стилей для полосы загрузки, а второй – для индикатора загрузки (текущее значение выполняемой задачи).
|
1 2 3 4 5 6 7 |
rogress::-webkit-progress-bar { /* стили */ } progress::-webkit-progress-value { /* стили */ } |
В Firefox есть собственный псевдо-класс -moz-progress-bar, который можно использовать только для стилизации индикатора прогресса.
|
1 2 3 |
progress::-moz-progress-bar { /* стили */ } |
Вот полный список всех селекторов, необходимых для стилизации элемента progress.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
progress { /* стили */ } progress::-webkit-progress-bar { /* стили */ } progress::-webkit-progress-value { /* стили */ } progress::-moz-progress-bar { /* стили */ } |
Изменение значения полосы загрузки с помощью JavaScript
А теперь давайте рассмотрим пример использования простой полосы загрузки со следующим HTML кодом.
|
1 |
<progress max="100" value="0" id="demo-progress-bar"></progress> |
Чтобы изменить значение полосы загрузки в JavaScript, можно использовать следующий код.
|
1 |
document.getElementById( 'demo-progress-bar' ).value = 45; |
Данный код изменяет значение элемента progress, id которого равен «demo-progress-bar», на 45. Вот простой JavaScript код, который изменяет значение элемента progress с 0 до 100, увеличивая значение на единицу каждые 100 миллисекунд.
|
1 2 3 4 5 6 7 8 9 |
var counter = 0; function progressDemo() { counter++; document.getElementById( 'demo-progress-bar' ).value = counter; if( counter == 100 ) { clearInterval( timer ); } } var timer = setInterval( progressDemo, 100 ); |
Источник: //basicuse.net/
Редакция: Команда webformyself.
Комментарии (1)