Barre de progression

La balise progress de HTML 5 représente l'état d'un évènement en cours de réalisation.

Syntaxe HTML 5:

<progress value="" max=""></progress> 

La balise de fermeture est obligatoire.
Une progress peut contenir d'autres balises. Il ne peut contenir une autre balise progress.

Exemple pour voir si le navigateur supporte cette balise HTML 5. Rien ne s'affiche autement sauf le contenu de la balise.

50%

Le code HTML:

<progress value="50%" max="200">50%</progress> 

La balise a deux attributs propres, relatif à la représentation de la progression, mais aussi des attributs hérités directement utiles à son apparence. Dans la table ci-dessous, les attributs spécifiques sont en caractères gras:

Attributs Rôle et commentaire
value

La valeur assignée à value est le pourcentage de progression actuel à afficher. Aucune unité n'est présupposée. On l'assigne de façon dynamique.

max
C'est la valeur totale que représente la barre et la valeur maximale que peut avoir l'attribut value. Elle peut être assignée à la création de la page ou ultérieurement.
width
La largeur de la barre, qui est fonction de la valeur maximale et de la granularité de la progression.
height
Hauteur de la barre.
vertical-align
Alignement de l'indicateur dans le widget graphique.
background-color
Grise par défaut, la couleur de fond du widget.
display
Par défaut inline-block.

Barre de progression en HTML 4

Pour créer cet élément graphique, on utilisera deux calques imbriqués et la progression est représentée par le calque interne dont la largeur est modifiée progressivement en JavaScript.

75%

Le code CSS de cet exemple est le suivant:

width:300px;
padding:2px;
background-color:white;
border:1px solid black;
text-align:center

Pour le calque interne, le code CSS de départ est:

width:0px;
background-color:green;

Et la largeur est modifiée par un code JavaScript:

function prog(w)
{
   var x = document.getElementById("indicator");
   x.style.width=w;
}

A titre de démonstration, on peut simuler une progression continue en utilisant la fonction JavaScript setInterval.

Démonstration et widget

0

Code HTML minimal

Pour afficher uniquement la barre de progression sans la valeur.

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

Code HTML complet

Pour créer un widget et afficher la valeur courante.

<div id="pwidget">  
<div id="progressbar">
<div id="indicator"></div>
</div>
<div id="progressnum">0</div>
</div> <input type="button" name="Submit" value="Lancer la progression" onclick="itv = setInterval(prog, 100)" /> <input type="button" name="Submit" value="Stopper" onclick="clearInterval(itv)" />

Code CSS complet

#pwidget
{
background-color:lightgray;
width:254px;
padding:2px;
-moz-border-radius:3px;
border-radius:3px;
text-align:left;
border:1px solid gray;
}
#progressbar
{
width:250px;
padding:1px;
background-color:white;
border:1px solid black;
height:28px;
}
#indicator
{
width:0px;
background-image:url("shaded-green.png");
height:28px;
margin:0;
}
#progressnum
{
text-align:center;
width:250px;
}

Code Javascript

var maxprogress = 250;   // total à atteindre
var actualprogress = 0; // valeur courante
var itv = 0; // id pour 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 = actualprogress;
if(actualprogress == maxprogress) clearInterval(itv);
}

Pour contrôler la barre de progression, on assigne la variable globale actualprogress, et on la met à zéro pour réinitialiser le compteur.

Voir aussi