Индикатор прогресса HTML5

В 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 за один кадр — можно увеличивать значение на большую величину, чтобы ускорить ход индикатора.

А затем мы добавляем результат к полоске прогресса.

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+.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/OBGj7kXG950/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Индикатор прогресса HTML5 | | 2013-04-05 23:22:37 | | Статьи Web-мастеру | | В HTML5 появился элемент индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка данных на сервер.В данном уроке мы рассмотрим, как | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: