Как изменить цвет progress html

Blink / Chrome

background-color

To color the background-color of a progress element (the part that does not increase/decrease) in WebKit browsers use the following:

progress::-webkit-progress-bar {background-color: #000; width: 100%;}

color

To color the effective color of the moving part of a progress element use the following:

progress::-webkit-progress-value {background-color: #aaa !important;}

Gecko / Firefox

background-color

To color the background-color of a progress element (the part that does not increase/decrease) in Gecko browsers use the following:

progress {background-color: #000;}

color

To color the effective color of the moving part of a progress element use the following:

progress::-moz-progress-bar {background-color: #aaa !important;}

Presto / Opera

I’ve unofficially dropped support for Opera since they’ve stopped developing it. For those confused and think Opera is still being developed — that is just an obviously rebranded copy of Chrome. Do not test browsers, test engines!

Trident / Internet Explorer (and «Edge»)

When Microsoft actually makes the effort they really do actually come through, this one actually makes perfect straight-forward sense.

background-color

progress {background-color: #000;}

color

progress {color: #aaa;}

WebKit / Safari

At some point WebKit/Safari stopped working with Chrome (or vice-versa); this is tested on Safari 14.0.3 as of 2021-03-13.

background-color

progress[value]::-webkit-progress-bar {background-color: #000;}

color

progress[value] {-webkit-appearance: none;}
progress[value]::-webkit-progress-value {background-color: #fff;}

Putting it all together, that makes:

/* background: */
progress::-webkit-progress-bar {background-color: black; width: 100%;}
progress {background-color: black;}

/* value: */
progress::-webkit-progress-value {background-color: green !important;}
progress::-moz-progress-bar {background-color: green !important;}
progress {color: green;}

<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>

Тег <progress> является индикатором хода выполнения задачи. Например, загрузки файла
или процента проголосовавших к определенному времени.

Атрибуты тега <progress>

value

Текущее значение.

max

Максимальное значение (по умолчанию 1).

Должно выполняться неравенство:

• 0 ≤ value ≤ max

Числовое значение value можно менять с помощью JavaScript.

Для тега <progress> также доступны общие атрибуты и атрибуты обработки событий.

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

<style type="text/css">
    .default-progressbar progress {
        margin-top: 10px;
        height: 25px;
        width: 100%;
    }
</style>
<div class="default-progressbar">
    <progress value="0">Выполнено 0% работы</progress>
    <progress value="0.75">Выполнено 75% работы</progress>
</div>

Браузеры, не отображающие тег <progress> выводят текст из контейнера <progress>…</progress>.

CSS-стили элемента <progress> можно изменять. Для этого сначала надо отменить стили браузеров по умолчанию.

progress {
/* Отключаем стиль (как правило, не требуется, но на всякий случай)  */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* Убираем границы по умолчанию в Firefox и Opera */
border: none;
/* Чтобы фоновое изображение в Safari работало, как надо */
background-size: auto;
}

Изменение цвета фона элемента <progress>

/* Firefox  */
progress {
background: #fac;
}
/* Chrome */
progress::-webkit-progress-bar {
background: #fac;
}

Несмотря на то, что правила одинаковые, объединять их в одно нельзя – работать не будет!

Изменение цвета значения элемента <progress>

Opera 11 и 12 не допускает изменение цвета индикатора – он остается зеленым.

/* IE10 */
progress {
color: #e0a;
}
/* Firefox */
progress::-moz-progress-bar {
background: #e0a;
}
/* Chrome */
progress::-webkit-progress-value {
background: #e0a;
}

Градиент в качестве значения <progress>

Для Internet Explorer цвет значения <progress> задается свойством color, т.е. никакого градиента для IE не получится

<style type="text/css">
    .gradient-progressbar progress {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: none;
        margin-top: 10px;
        background: #eee;
        border: 0;
        width: 100%;
        height: 25px;
        border-radius: 9px;
        color: #9c3;
    }
    .gradient-progressbar progress::-webkit-progress-bar {
        background: #eeeeee;
        border-radius: 9px;
    }
    .gradient-progressbar progress::-webkit-progress-value {
        background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
        border-radius: 9px;
    }
    .gradient-progressbar progress::-moz-progress-bar {
        background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
        border-radius: 9px;
    }
</style>
<div class="gradient-progressbar">
    <progress value="0.5">Выполнено 50% работы</progress>
</div>

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

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

Прогресс бар может быть добавлен тегом <progress>. Значение индикатора определяется на основе минимального и максимального атрибутов, следующим образом:

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

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

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

Оформление прогресс бара

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

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

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

Итак, нам нужны обходные пути.

В Chrome и Safari, обращение к элементу <progress> будет таким.

::-webkit-progress-bar
::-webkit-progress-value

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

progress::-webkit-progress-bar {
    /* style rules */
}
progress::-webkit-progress-value {
    /* style rules */
}

Firefox также имеет свой специальный псевдо-класс

::-moz-progress-bar

В отличие от Chrome и Safari, этот псевдо-класс в Firefox относится к значению (ползунку).

progress::-moz-progress-bar {
    /* style rules */
}

И так, вот все наши стили для стилизации <progress> HTML5.

progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
}
progress::-moz-progress-bar {
/* style rules */
}

Примеры

Собственно, нет ничего сложного чтобы стилизовать этот элемент. Еще раз подведем итог, что бы стало все понятно. Сначала пишем правило для progress, это правило будет у нас являться также правилом для фона элемента в браузерах mozilla. Потом пишем отдельно правила для фона и ползунка для браузеров Chrome, и в заключении для ползунка в mozilla.
Вот первый пример:

HTML

<div>
   <progress id="progressbar" value="50" max="100"></progress>
</div>

Элемент div тут просто для выравнивания и небольшой красоты.
CSS

div {
	width: 300px;
	margin: 50px auto 0;
	padding: 20px;
	border-radius: 3px;
	background-color: #fff;
	box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .2);
}
progress {
    border:0;
	width: 300px;
	height: 20px;
	border-radius: 5px;
	background: #f1f1f1;
	-webkit-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
}
progress::-webkit-progress-bar {
	width: 300px;
	height: 20px;
	border-radius: 5px;
	background: #f1f1f1;
	-webkit-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
}
progress::-webkit-progress-value {
	border-radius: 5px;
	background: #ffb76b;
	background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
}
progress::-moz-progress-bar {
    border-radius: 5px;
	background: #ffb76b;
	background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
}

Не пугайтесь всей этой кучи правил, это правила для css3 градиента и теней, который я просто скопировал с http://www.colorzilla.com/gradient-editor/ и с http://css3generator.com/ сайтов.
Вы можете убрать эти градиенты и получить более простой пример:

progress {
    border:0;
	width: 300px;
	height: 20px;
	border-radius: 5px;
	background: #f1f1f1;
}
progress::-webkit-progress-bar {
	width: 300px;
	height: 20px;
	border-radius: 5px;
	background: #f1f1f1;
}
progress::-webkit-progress-value {
	border-radius: 5px;
	background: #ffb76b;
}
progress::-moz-progress-bar {
    border-radius: 5px;
	background: #ffb76b;
}

Еще один пример с фэйковой демонстрацией работы:

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="demo-wrapper html5-progress-bar">
	<div class="progress-bar-wrapper">
		<progress id="progressbar" value="0" max="100"></progress>
		<span class="progress-value">0%</span>
	</div>
</div>

CSS

 .demo-wrapper {
	width: 300px;
	margin: 30px auto 0;
}
.html5-progress-bar {
	padding: 15px 15px;
	border-radius: 3px;
	background-color: #fff;
	box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .2);
}

.html5-progress-bar progress {
	background-color: #f3f3f3;
	border: 0;
	width: 80%;
	height: 18px;
	border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-bar {
	background-color: #f3f3f3;
	border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-value {
	background: #cdeb8e;
	background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
	background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
	border-radius: 9px;
}
.html5-progress-bar progress::-moz-progress-bar {
	background: #cdeb8e;
	background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
	background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
	border-radius: 9px;
}
.html5-progress-bar .progress-value {
	padding: 0px 5px;
	line-height: 20px;
	margin-left: 5px;
	font-size: .8em;
	color: #555;
	height: 18px;
	float: right;
}

jQuery
Для анимации создадим простенький скрипт.

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

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

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);

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

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

Как только значение будет равно максимальному, очистить интервал, который остановит функцию анимации.
Вот и все.
Поддержка браузеров
Согласно CanIUse.com, HTML5 progress элемент полностью поддерживается в следующих браузерах: Firefox 16 +, Chrome 8 +, 6 + Safari и Opera 11 +. Здесь можно посмотреть очень красивые примеры прогресс баров.

Оригинал: 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+.

Что ещё почитать

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

• Cross Browser HTML5 Progress Bar in Depth – User Agent Man
• HTML5 file upload with progress – FileZilla Project
• HTML5 Progress Documentation – W3.org

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начнем.

Основы

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

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

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

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

Стили для индикатора прогресса

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

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

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

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

В Chrome и Safari стили не используются и применяются установки Webkit (в текущий момент времени).

Поэтому потребуется больше действий.

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

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

Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:

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

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

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

В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.

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" type="text/javascript"></script>

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

var progressbar = $('#progressbar'),
	max = progressbar.attr('max'),
	value = progressbar.val(),
	time = (1000/max)*5;

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

var loading = function() {

}

Внутри выше приведенной функции устанавливаем интервал прогресса. Будем увеличивать данное значение на 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);
}

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

Приведем полный код анимации индикатора прогресса:

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

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

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