Прогресс по аналогии с Windows

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

Windows 7 не использует этот принцип, но показывает оставшееся время над планкой. А поскольку Microsoft представила часть того, что будет с Windows 8, мы видим на скриншотах, что виджет неизменен.
Что касается Mac OS Lion, он использует не менее очищенный виджет, с голубым цветом.

Похожий вид мы можем придать нашим веб-приложениям с графическим компонентом, описанным ниже. Это благодаря таблице стилей в CSS 2 и 3.

 

HTML-код

Для отображения числового значения:

<p id="progressnum"></p>  

Для индикатора выполнения :

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

Код для демонстрации:

<input type="button" name="Submit" value="Lancer"
    onclick="itv = setInterval(prog, 100)" />
<input type="button" name="Submit" value="Stopper"
    onclick="clearInterval(itv)" />

Код CSS

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

#progressbar
{
  position:relative;
  width:250px;
  padding:0 0 0 0;
  background-image:url("images/pggray.png");
  height:14px;
  border:1px solid #CCC;
  -moz-border-radius:2px;
  border-radius:2px;	
}
#indicator
{
  position:absolute;
  left:0;
  top:0;
  width:0px;
  background-image:url("images/pggreen.png");
  height:14px;
  margin:0 0 0 0;
}

JavaScript

<script>  
var maxprogress = 250;
var actualprogress = 0;
var itv = 0;
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 = (maxprogress - actualprogress) + " secondes restantes";
}
</script> 

Код может быть скопирован выше для приложений и помещен в источник. Вам также нужно два изображения :

Фоновое изображение виджета

Фоновое изображение индикатора.

Progress bar совместим все браузеры, виджет с числовым значением прогресса в наложении.