Progress by analogy with Windows

We have described a progress bar widget with a numerical progress value in overlay on the green panel.

Windows 7 does not use this principle, but shows the remaining time above the bar. And since Microsoft has introduced some of what will happen with Windows 8, we see in the screenshots that the widget is unchanged.
As for Mac OS Lion, it uses an equally cleaned widget, with a blue color.

We can give a similar look to our web applications with the graphical component described below. This is thanks to the stylesheet in CSS 2 and 3.

 

HTML-code

To display a numeric value:

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

For progress bar:

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

Code to demonstrate:

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

CSS code

CSS code is also simpler. This time we use two images, one for the background of the widget, one for the progress bar.

#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> 

The code can be copied above for applications and placed in the source. You also need two images:

Widget background image

Indicator background image.

Progress bar is compatible with all browsers, widget with numerical value of progress in overlay.