Бар прогресса

Метка прогресса HTML 5 представляет состояние реализуемого события.

Синтаксис HTML 5:

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

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

Пример, чтобы узнать, поддерживает ли браузер этот HTML-тег 5. Кроме содержимого тега, ничего не отображается.

50%

HTML-код :

<progress value="50%" max="200">50%</progress>

Тег имеет два собственных атрибута, связанных с представлением прогресса, а также атрибуты, унаследованные непосредственно для его внешнего вида. В таблице ниже определенные атрибуты выделены жирным шрифтом :

Атрибуты Роль и комментарий
стоившаяся друг друга

Значение, назначенное значению, - это текущий процент прогресса, который должен отображаться. Не предполагается ни одного подразделения. Мы назначаем его динамично .
максимум
Это общее значение, представляемое столбцом, и максимальное значение, которое может иметь атрибут. Она может быть назначена для создания страницы или позже.
width
Ширина полосы, которая зависит от максимального значения и детализации прогресса.
высота
Высота штанги.
вертикальное выравнивание
Выравнивание индикатора в графическом виджете.
фон-color
Серый по умолчанию - цвет фона виджета.
дисплей
По умолчанию inline-block .

Панель прогресса в HTML 4

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

75%

CSS-код в этом примере выглядит следующим образом:

width:300px;
padding:2px;
background-color:white;
border:1px solid black;
text-align:center

Для внутреннего слоя начальный CSS-код:

width:0px;
background-color:green;

А ширина меняется кодом JavaScript:

function prog(w)
{
   var x = document.getElementById("indicator");
   x.style.width=w;
}

Для демонстрации можно имитировать непрерывный прогресс с помощью функции JavaScript setInterval.

Демонстрация и виджет

0

Минимальный HTML-код

Для отображения только индикатора прогресса без значения. 

<div id="progressbar">
    <div id="indicator"></div>
</div>

Полный HTML-код

Создание виджета и отображение текущего значения.

<div id="pwidget">  
<div id="progressbar">
    <div id="indicator"></div>
</div>
<div id="progressnum">0</div>
</div>
<input type="button" name="Submit" value="Lancer la progression"
    onclick="itv = setInterval(prog, 100)" />
<input type="button" name="Submit" value="Stopper"
    onclick="clearInterval(itv)" />

Полный код CSS 

#pwidget
{
  background-color:lightgray;
  width:254px;
  padding:2px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-align:left;
  border:1px solid gray;	
}
#progressbar
{
  width:250px;
  padding:1px;
  background-color:white;
  border:1px solid black;
  height:28px;
}
#indicator
{
  width:0px;
  background-image:url("shaded-green.png");
  height:28px;
  margin:0;
}
#progressnum
{
  text-align:center;
  width:250px;
}

Код JavaScript 

var maxprogress = 250;   // total à atteindre
var actualprogress = 0;  // valeur courante
var itv = 0;  // id pour setinterval
function prog()
{
  if(actualprogress >= maxprogress) 
  {
    clearInterval(itv);   	
    return;
  }	
  var progressnum = document.getElementById("progressnum");
  var indicator = document.getElementById("indicator");
  actualprogress += 1;	
  indicator.style.width=actualprogress + "px";
  progressnum.innerHTML = actualprogress;
  if(actualprogress == maxprogress) clearInterval(itv);   
}

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

См. также