Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Прогресс бары для сайта Категория: Веб-мастерство
Название: Прогресс бары для сайта
Дата добавления: 07-06-2012
Раз просмотрено: 1031
Комментарии: 0
Рейтинг: * * * * * * * * * * (3 голоса)

Прогресс бары для сайта

В разработке веб-приложений, прогресс бары просто великолепны, когда вы хотите показать пользователю, что какое-то действие происходит, особенно если оно занимает длительное время. Они могут быть анимированными (как в Gmail, когда он показывает пользователю сколько осталось ждать до загрузки), или статичными (как в некоторых интернет-магазинах, где они показывают сколько страниц пользователю осталось заполнить). В этой статье вы узнаете многое о создании прогресс баров для сайтов.

Раньше, для создания прогресс баров для сайтов использовались теги <div>, CSS и немного математики. Но теперь, прогресс бары создаются при помощи HTML 5 тега <progress>. Однако, этот тег отображается в разных браузерах и операционных системах по разному, а браузер Internet Explorer младше 10 версии, а также старые версии Opera, Safari и Firefox не поддерживают его совсем. Однако, эта проблема может быть решена путем стилизации этого тега.

Простой прогресс бар

HTML разметка прогресс бара чрезвычайно проста:

<progress max="100" value="60">
  <strong>Выполнено: 60%</strong>
</progress>

Обратите внимание на то, что все, что находится внутри тега <progress>, будет отображено браузерами, не поддерживающими его. В этой таблице вы увидите, как выглядит этот тег в различных операционных системах и браузерах, которые поддерживают его:

Windows 7 Windows XP Mac OS X Ubuntu Linux
Firefox Прогресс бар в Firefox в Windows 7 Прогресс бар в Firefox в Windows XP Прогресс бар в Firefox в Mac OS X Прогресс бар в Firefox в Ubuntu Linux
Chrome Прогресс бар в Chrome в Windows 7 Прогресс бар в Chrome в Windows XP Прогресс бар в Chrome в Mac OS X Прогресс бар в Chrome в Ubuntu Linux
IE 10 Прогресс бар в Internet Explorer 10 в Windows 7 N/A
Opera Прогресс бар в Opera в Windows 7 Прогресс бар в Opera в Windows XP Прогресс бар в Opera в Mac OS X Прогресс бар в Opera в Windows Ubuntu Linux

Обратите внимание, что Firefox и Chrome будут обрабатывать прогресс бары таким образом, что они будут схожи со стандартными для их операционной системы прогресс барами, за исключением Chrome для Linux, который будет использовать свой собственный стиль. А цвет прогресс баров в Opera будет всегда зеленым.

Неопределенный прогресс бар

Прогресс бар также может находиться в неопределенном состоянии. Это значит, что точное колчество оставшегося времени до завершения задачи не известно. Такие прогресс бары служат для подсказки пользователю, что его запрос или действие еще обрабатывается. Для того, чтобы задать неопределенный прогресс бар достаточно не указывать атрибут value:

<progress max="100">
  <strong>Выполняется…</strong>
</progress>

Этот тип прогресс бара также отображается по разному в различных браузерах и операционных системах. Все эти прогресс бары (как и несколько из обычных) анимированные. Важно, что браузер Opera не видит разницы между прогресс баром в неопределенном состоянии и обычным со значением 0. Вот таблица с примерами прогресс баров в неопределенном состоянии в разных браузерах:

Windows 7 Windows XP Mac OS X Ubuntu Linux
Firefox Прогресс бар неопределенного состояния в Firefox в Windows 7 Прогресс бар неопределенного состояния в Firefox в Windows XP Прогресс бар неопределенного состояния в Firefox в Mac OS X Прогресс бар неопределенного состояния в Firefox в Ubuntu Linux
Chrome Прогресс бар неопределенного состояния в Chrome в Windows 7 Прогресс бар неопределенного состояния в Chrome в Windows XP Прогресс бар неопределенного состояния в Chrome в Mac OS X Прогресс бар неопределенного состояния в Chrome в Ubuntu Linux
IE 10 Прогресс бар неопределенного состояния в Internet Explorer 10 в Windows 7 N/A
Opera Прогресс бар неопределенного состояния в Opera в Windows 7 Прогресс бар неопределенного состояния в Opera в Windows XP Прогресс бар неопределенного состояния в Opera в Mac OS X Прогресс бар неопределенного состояния в Opera в Windows Ubuntu Linux

Стилизация прогресс баров

Но что, если вас не устраивает вид стандартных прогресс баров, или вы хотите сделать их уникальными, одинаковыми во всех браузерах или просто добавить кроссбраузерности? Выход для этого — стилизация прогресс баров. Стилизация выполняется также как и в других случаях, но для прогресс баров существует несколько особенных моментов. Давайте разберем этот довольно простой CSS код:

progress {
	/* Сброс стандартного вида */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
	
	width: 400px;
	height: 25px;
	
	border-radius: 13px;
	background: #DDD;
	color: #000;
}

/* Chrome */
progress::-webkit-progress-bar {
	background: #DDD;
	border-radius: 13px;
}
progress::-webkit-progress-value {
	background: #000;
	border-radius: 13px;
}

/* Firefox */
progress::-moz-progress-bar {
	background: #000;
	border-radius: 13px;
}

В результате мы получим прогресс бар примерно такого вида. Однако его отображение в Internet Explorer, Opera и старых версиях браузеров будет отличатся:

Стилизованный прогресс бар

Теперь давайте разберем малоизвестные свойства которые мы использовали для стилизации прогресс бара:

Теперь, зная этот материал вы можете создавать стандартные простые и неопределенные прогресс бары, вы знаете как они выглядят в разных браузерах и операционных системах, вы знаете как получить кроссбраузерные прогресс бары и стилизовать их по своему желанию и вкусу. А подробней о стилизации прогресс баров вы можете узнать в статье «Прогресс бары с помощью CSS».

Это интересно: «Трехмерные круглые кнопки с помощью CSS».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

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