Как использовать и стилизовать полосу загрузки в HTML5

Как использовать и стилизовать полосу загрузки в HTML5

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

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

демо

Добавление полосы загрузки на страницу

Чтобы добавить полосу загрузки на страницу, необходимо использовать элемент progress. Значения полосы загрузки определяются с помощью атрибутов value и max. Вот пример:

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

Поскольку в базовой реализации используются стандартные формы, то визуальное представление данного элемента зависит от платформы. Ниже приведен пример того, как полоса загрузки выглядит в Windows 7.

Как уже было сказано, элемент progress является обычной полосой загрузки в HTML5 и, проще говоря, отображает прогресс выполнения какой-либо задачи. При этом атрибут max определяет максимальное значение, требуемое для выполнения задачи, а атрибут value определяет, сколько уже выполнено на текущий момент.

Браузерная поддержка: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.

Стилизация полосы загрузки

Теперь давайте определим стили для полосы загрузки, чтобы она одинаково выглядела на всех платформах. Чтобы добавить стили для элемента progress, мы просто используем селектор тега. В следующем примере мы изменяем цвет фона, убираем границы и скругляем углы у данного элемента.

progress {
  background-color: #00FEFD;
  border-radius: 10px;
  border: 0;
  height: 20px;
  width: 200px;
}

Но здесь кроется проблема, т.к. каждый браузер немного по-своему отображает данные стилевые правила:

В Firefox стили затрагивают только полосу загрузки, а индикатор загрузки, отображающий текущее значение, остается неизменным.

В Chrome и Safari данные стили совсем не применяются, за исключением стилей с вендорным префиксом -webkit-.

Итак, в Chrome и Safari внешний вид элемента progress может быть изменен благодаря использованию псевдо-классов: -webkit-progress-bar и -webkit-progress-value. Первый из них используется для определения стилей для полосы загрузки, а второй – для индикатора загрузки (текущее значение выполняемой задачи).

rogress::-webkit-progress-bar {
  /* стили */
}

progress::-webkit-progress-value {
  /* стили */
}

В Firefox есть собственный псевдо-класс -moz-progress-bar, который можно использовать только для стилизации индикатора прогресса.

progress::-moz-progress-bar {
  /* стили */
}

Вот полный список всех селекторов, необходимых для стилизации элемента progress.

progress {
  /* стили */
}

progress::-webkit-progress-bar {
  /* стили */
}

progress::-webkit-progress-value {
  /* стили */
}

progress::-moz-progress-bar {
  /* стили */
}

Изменение значения полосы загрузки с помощью JavaScript

А теперь давайте рассмотрим пример использования простой полосы загрузки со следующим HTML кодом.

<progress max="100" value="0" id="demo-progress-bar"></progress>

Чтобы изменить значение полосы загрузки в JavaScript, можно использовать следующий код.

document.getElementById( 'demo-progress-bar' ).value = 45;

Данный код изменяет значение элемента progress, id которого равен «demo-progress-bar», на 45. Вот простой JavaScript код, который изменяет значение элемента progress с 0 до 100, увеличивая значение на единицу каждые 100 миллисекунд.

var counter = 0;
function progressDemo() {
  counter++;
  document.getElementById( 'demo-progress-bar' ).value = counter;
  if( counter == 100 ) {
    clearInterval( timer );
  }
}
var timer = setInterval( progressDemo, 100 );

Источник: http://basicuse.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Александр

    Ошибка в коде

    rogress::-webkit-progress-bar {
    /* стили */
    }

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree