Progress bar similar to that of Windows 7

We have described a progress bar widget with the numerical value of the progression superimposed on the green bar.

Windows 7 does not use this principle but displays the time remaining on top of the bar. And since Microsoft unveiled some of what will be Windows 8, we see on the screenshots that the widget is unchanged.
As for Mac OS Lion, the widget uses an equally sleek widget with a blue color.

We can give a similar look to our web applications with the graphical component described below. Thanks to a CSS 2 and 3 style sheet..

 

HTML code

To display the value above the bar:

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

To insert the progress bar:

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

Code for the demo:

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

CSS code

The CSS is also simpler. Two images are used this time, one for the background of the widget, one for the progress indicator.

#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; // total to reach
var actualprogress = 0; // current value
var itv = 0; // id for 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 = (maxprogress - actualprogress) + " secondes restantes";
}
</script>

The code can be copied above for your applications or taken from the source. You will also need two images:

The image for the backround of the widget

The image for the indicator.

The initial article: Progress Bar compatible with all browsers.