Индикатор прогресса HTML5
В HTML5 появился элемент индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка данных на сервер.
В данном уроке мы рассмотрим, как добавлять такой элемент в документ, как определять для него стили CSS и анимировать индикатор прогресса.
Начнем.
Основы
Индикатор прогресса добавляется с помощью элемента <progress>. Значение индикатора определяется атрибутами value, min и max:
Так как базовая реализация использует стандартные формы, то визуальное представление будет зависеть от платформы реализации. Ниже приводится пример того, как выглядит индикатор прогресса в Windows и OSX.
Теперь определим стили для индикатора прогресса, чтобы он выглядел одинаково на любых платформах.
Стили для индикатора прогресса
В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления правил для элемента <progress>. В ниже приведенном примере мы изменяем фоновый цвет, удаляем обводку и скругляем углы на радиус равный половине высоты элемента.
Однако, каждый браузер обрабатывает правила немного по своему.
В Firefox стили влияют на полоску индикатора, а на текущее значение не оказывают воздействия.
В Chrome и Safari стили не используются и применяются установки Webkit (в текущий момент времени).
Поэтому потребуется больше действий.
В Chrome и Safari элемент прогресса преобразуется следующим образом.
Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:
Firefox также имеет специальный псевдо-класс ::-moz-progress-bar. В отличие от Chrome и Safari данный псевдо-класс ссылается на текущее значение:
В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.
Анимирование прогресса
Теперь рассмотрим, как анимировать индикатор прогресса. Обычно, полоска расширяется слева направо по мере выполнения задачи.
Идея заключается в том, что индикатор прогресса расширяется от 0 и останавливается в момент достижения максимального значения. Мы также будем выводить числовое значение прогресса. Ниже приводится структура HTML.
В данном примере мы используем jQuery для анимации индикатора прогресса. Поэтому добавляем jQuery в документ:
Затем мы добавляем скрипт, который выполняет расширение полоски прогресса. Сначала сохраняем элемент индикатора прогресса, текущее и максимальное значения, а также и частоту кадров:
Затем мы создаем переменную, которая хранит функцию анимации. В нашем примере она называется loading.
Внутри выше приведенной функции устанавливаем интервал прогресса. Будем увеличивать данное значение на 1 за один кадр — можно увеличивать значение на большую величину, чтобы ускорить ход индикатора.
А затем мы добавляем результат к полоске прогресса.
Мы также показываем значение рядом с индикатором прогресса:
Затем мы создаем новую функцию для выполнения анимации:
В данной точке анимация уже работает, но значение будет увеличиваться бесконечно. Поэтому нам надо создать условное выражение для остановки анимации в момент достижения максимального значения.
Сохраним выше приведенную функцию в переменной:
В переменной loading добавляем условное выражение:
Выше приведенный код после достижения максимального значения сбрасывает интервал, что останавливает анимацию.
Приведем полный код анимации индикатора прогресса:
Поддержка в браузерах
Элемент HTML5 для индикатора прогресса поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.
В данном уроке мы рассмотрим, как добавлять такой элемент в документ, как определять для него стили 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;
}
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
? <div> ::-webkit-progress-bar
? <div>::-webkit-progress-value
Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:
Код
progress::-webkit-progress-bar {
/* стили */
}
progress::-webkit-progress-value {
/* стили */
}
/* стили */
}
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 {
/* стили */
}
/* стили */
}
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;
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);
loading();
}, time);
В данной точке анимация уже работает, но значение будет увеличиваться бесконечно. Поэтому нам надо создать условное выражение для остановки анимации в момент достижения максимального значения.
Сохраним выше приведенную функцию в переменной:
Код
var animate = setInterval(function() {
loading();
}, time);
loading();
}, time);
В переменной loading добавляем условное выражение:
Код
if (value == max) {
clearInterval(animate);
}
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);
};
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+.
-
FalleN -
3790 -
1 -
257
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...