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