В HTML5 появился элемент индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка данных на сервер.
В данном уроке мы рассмотрим, как добавлять такой элемент в документ, как определять для него стили CSS и анимировать индикатор прогресса.
Начнем.
Основы
Индикатор прогресса добавляется с помощью элемента <progress>. Значение индикатора определяется атрибутами value, min и max:
<progress value="10" max="100"></progress>
Так как базовая реализация использует стандартные формы, то визуальное представление будет зависеть от платформы реализации. Ниже приводится пример того, как выглядит индикатор прогресса в Windows и OSX.
Теперь определим стили для индикатора прогресса, чтобы он выглядел одинаково на любых платформах.
Стили для индикатора прогресса
В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления правил для элемента <progress>. В ниже приведенном примере мы изменяем фоновый цвет, удаляем обводку и скругляем углы на радиус равный половине высоты элемента.
progress {
background-color: #f3f3f3;
border: 0;
height: 18px;
border-radius: 9px;
}
Однако, каждый браузер обрабатывает правила немного по своему.
В Firefox стили влияют на полоску индикатора, а на текущее значение не оказывают воздействия.
В Chrome и Safari стили не используются и применяются установки Webkit (в текущий момент времени).
Поэтому потребуется больше действий.
В Chrome и Safari элемент прогресса преобразуется следующим образом.
<progress>
? <div> ::-webkit-progress-bar
? <div>::-webkit-progress-value
Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:
progress::-webkit-progress-bar {
/* стили */
}
progress::-webkit-progress-value {
/* стили */
}
Firefox также имеет специальный псевдо-класс ::-moz-progress-bar. В отличие от Chrome и Safari данный псевдо-класс ссылается на текущее значение:
progress::-moz-progress-bar {
/* стили */
}
В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.
progress {
/* стили */
}
progress::-webkit-progress-bar {
/* стили */
}
progress::-webkit-progress-value {
/* стили */
}
progress::-moz-progress-bar {
/* стили */
}
Анимирование прогресса
Теперь рассмотрим, как анимировать индикатор прогресса. Обычно, полоска расширяется слева направо по мере выполнения задачи.
Идея заключается в том, что индикатор прогресса расширяется от 0 и останавливается в момент достижения максимального значения. Мы также будем выводить числовое значение прогресса. Ниже приводится структура HTML.
<progress id="progressbar" value="0" max="100"></progress>
В данном примере мы используем jQuery для анимации индикатора прогресса. Поэтому добавляем jQuery в документ:
<script src="js/jquery.js" type="text/javascript"></script>
Затем мы добавляем скрипт, который выполняет расширение полоски прогресса. Сначала сохраняем элемент индикатора прогресса, текущее и максимальное значения, а также и частоту кадров:
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
value = progressbar.val(),
time = (1000/max)*5;
Затем мы создаем переменную, которая хранит функцию анимации. В нашем примере она называется loading.
var loading = function() {
}
Внутри выше приведенной функции устанавливаем интервал прогресса. Будем увеличивать данное значение на 1 за один кадр — можно увеличивать значение на большую величину, чтобы ускорить ход индикатора.
value += 1;
А затем мы добавляем результат к полоске прогресса.
addValue = progressbar.val(value);
Мы также показываем значение рядом с индикатором прогресса:
$('.progress-value').html(value + '%');
Затем мы создаем новую функцию для выполнения анимации:
setInterval(function() {
loading();
}, time);
В данной точке анимация уже работает, но значение будет увеличиваться бесконечно. Поэтому нам надо создать условное выражение для остановки анимации в момент достижения максимального значения.
Сохраним выше приведенную функцию в переменной:
var animate = setInterval(function() {
loading();
}, time);
В переменной loading добавляем условное выражение:
if (value == max) {
clearInterval(animate);
}
Выше приведенный код после достижения максимального значения сбрасывает интервал, что останавливает анимацию.
Приведем полный код анимации индикатора прогресса:
$(document).ready(function() {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*5,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
};
Поддержка в браузерах
Элемент HTML5 для индикатора прогресса поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.