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.
Sous Internet Explorer avant la version 9, les bords ne sont pas arrondis, le CSS 3 n'étant pas reconnu, mais même si le widget est rectangulaire, il fonctionne parfaitement.

 

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.