HTML5: progress

В HTML5 появился новый элемент - индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка файла на сервер.

Индикатор прогресса добавляется с помощью тега progress. Атрибуты элемента: value, min и max

<progress value="30" max="100"></progress>

Внешний вид зависит от операционной системы и браузера.

Поменяем некоторые стили.

progress {
	background-color: #f5f5f5;
	border: 0;
	height: 18px;
	border-radius: 8px;
}

Но не все стили применяется к элементу в разных браузерах. Приходится использовать дополнительные правила, о которых не буду рассказывать.

Атрибуты индикатора, в том числе max и value, всегда будут находиться между 0% и 100%. Браузер вычисляет процентное значение от максимума и подстраивает длину индикатора. Индикатор при заполнении меняет цвет с серого на синий, где полностью серый равен 0%, а полностью синий – 100%.

Если не задан value, прогресс-бар будет не определен. Chrome, Opera, Safari и Firefox отображают неопределенные прогресс-бары в виде анимированных полосок, IE стилизует их под анимированные точки.

В отличие от meter тег progress движется только в направлении 100% от значения max. По умолчанию прогресс-бары имеют вид inline-block, т.е. им можно задать width и height. Высота стилизованного индикатора не изменится (в отличие от meter), но под ним добавится отступ.

Для анимации используется JavaScript или jQuery.

<script>
	$(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);
	});
</script>

Обновите страницу, чтобы увидеть анимацию снова.

Реклама