Barre de progression similaire à celle de Windows

Nous avons décrit un widget de barre de progression avec la valeur numérique de la progression en surimposition sur la barre verte.

Windows 7 n'utilise pas ce principe mais affiche le temps restant au-dessus de la barre. Et puisque Microsoft à dévoilé une partie de ce que sera Windows 8, nous voyons sur les captures d'écran que le widget est inchangé.
Quand à Mac OS Lion, il utilise un widget tout aussi épuré, avec une couleur bleue.

On peut donner un look similaire à nos applications Web avec le composant graphique décrit ci-dessous. Cela grâce à une feuille de style en CSS 2 et 3.

Code HTML

Pour afficher la valeur numérique:

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

Pour la barre de progression:

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

Code pour la démo:

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

Code CSS

Le code CSS est également plus simple. On utilise cette fois deux images, une pour le fond du widget, une pour l'indicateur de progression.

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

Le code peut être recopié ci-dessus pour vos applications et repris dans la source. Il vous faut aussi deux images:

L'image de fond du widget

L'image de fond pour l'indicateur.

Barre de progression compatible tous navigateurs, un widget avec la valeur numérique de progression en surimposition.