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

  1. Основное использование
  2. Styling Progress Bar
  3. Оживи Прогресс
  4. Поддержка браузера
  5. Дальнейшие ссылки

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

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

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

Рекомендуемое чтение: 35 красивых дизайнов Progress Bar

Основное использование

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

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

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

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

Styling Progress Bar

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

progress {background-color: # f3f3f3; граница: 0; высота: 18 пикселей; радиус границы: 9 пикселей; }

Однако каждый браузер обрабатывает это немного по-своему.

В Firefox стили влияют на индикатор выполнения, в то время как индикатор выполнения / значение не затрагиваются.

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

Итак, нам нужно больше обходных путей в этих случаях.

Итак, нам нужно больше обходных путей в этих случаях

В Chrome и Safari элемент прогресса переводится следующим образом.

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

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

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

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

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

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

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

Оживи Прогресс

Далее мы увидим, как анимировать индикатор выполнения. Как правило, индикатор выполнения расширяется слева направо по мере выполнения задачи.

Идея состоит в том, что индикатор выполнения расширится от 0 и остановится, как только достигнет максимального значения. Мы также будем отображать номер значения по мере его продвижения. Ниже приведена структура HTML.

HTML

<progress id = "progressbar" value = "0" max = "100"> </ progress>

CSS

В этом примере мы будем использовать jQuery для анимации индикатора выполнения. Итак, мы также не должны забывать вставлять jQuery, вот так.

<script src = "js / jquery.js" type = "text / javascript"> </ script>

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

var progressbar = $ ('# progressbar'), max = progressbar.attr ('max'), значение = progressbar.val (), время = (1000 / max) * 5;

Далее мы создаем переменную, которая хранит функцию анимации. В этом примере мы вызываем переменную loading.

var loading = function () {}

Внутри функции выше мы устанавливаем интервал выполнения. Мы увеличим значение на 1 за таймфрейм - вы можете увеличить значение, чтобы ускорить прогресс.

значение + = 1;

И затем мы добавляем результат в индикатор выполнения.

addValue = progressbar.val (значение);

Мы также показываем значение внутри, рядом с индикатором выполнения.

$ ('. progress-value'). html (value + '%');

Далее мы создаем новую функцию для запуска функции анимации.

setInterval (function () {loading ();}, время);

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

Во-первых, давайте сохраним вышеуказанную функцию в переменной следующим образом.

var animate = setInterval (function () {loading ();}, время);

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

if (value == max) {clearInterval (animate); }

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

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

$ (документ) .ready (function () {var progressbar = $ ('# progressbar'), max = progressbar.attr ('max'), время = (1000 / max) * 5, значение = 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 ();}, время);};

Вы можете просмотреть демо-версию и загрузить исходный код по следующим ссылкам.

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

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

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

Дальнейшие ссылки

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