Создание и стилизация индикатора выполнения в HTML5

Оригинал: http://www.hongkiat.com/blog/html5-progress-bar/

Перевод: Влад Мержевич

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

В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.

Давайте начнём.

Основы использования

Индикатор добавляется тегом <progress>; значение прогресса определяется атрибутами value, min и max следующим образом.

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

Поскольку речь идёт о встроенном индикаторе, его вид варьируется в зависимости от платформы. Ниже показано, как встроенный индикатор выглядит в Windows и OS X.

Давайте теперь попробуем стилизовать этот элемент, чтобы он выглядел одинаково на всех платформах.

Стилизация индикатора выполнения

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

progress {
  background-color: #f3f3f3;
  border: 0;
  height: 18px;
  border-radius: 9px;
}

Тем не менее, в браузерах имеются небольшие отличия. В Firefox стили применяются к самому индикатору, в то время как стиль бегунка не меняется.

В Chrome и Safari исходные стили убираются и заменяются на стили Webkit, так что стиль выше не применяется (по крайней мере, на данный момент).

Итак, нам нужно что-то ещё в таком случае.

В Chrome и Safari элемент <progress> расшифровывается следующим образом.

<progress>
   ┗ <div> ::-webkit-progress-bar
        ┗ <div>::-webkit-progress-value

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

progress::-webkit-progress-bar {
  /* стилевые правила */
}
progress::-webkit-progress-value {
  /* стилевые правила */
}

У Firefox также есть специальный псевдокласс ::-moz-progress-bar. В отличие от Chrome и Safari, этот псевдокласс в Firefox относится к бегунку.

progress::-moz-progress-bar {
  /* стилевые правила */
}

Окончательно собираем эти селекторы вместе для стилизации индикатора выполнения.

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"></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);
}

Как только значение равно максимальному значению, выполняется функция clearInterval, которая останавливает анимацию.

Вот и все коды для анимации индикатора выполнения.

Вы можете посмотреть демонстрацию и скачать исходные файлы.

Поддержка браузеров

Согласно CanIUse.com, элемент <progress> полностью поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.