Barre de progression

La balise progressmeter présente un indicateur de progression sous forme de barre dont le contenu se remplit au fur et à mesure de l'achèvement de l'action que l'on mesure. Les exemples les plus courants sont le téléchargement d'un fichier, ou l'installation d'un logiciel.

Progressmeter et attributs

progressmeter

La balise qui affiche la barre de progression. Elle doit être initialisée à 0 par l'attribut value, sinon on ne pourra changer l'indicateur.

mode

La valeur "determined" Indique que l'on connait la durée totale de l'action au départ, et c'est la valeur par défaut. Si on ne la connait pas, on assignera "undetermined". Dans ce cas on ne peut changer l'indicateur.

value

La valeur de progression détermine la taille du contenu du progressmeter quand il est déterminé. C'est une valeur en pourcentage et elle va donc de 0 à 100 %. On associe un gestionnaire d'évènement au progressmeter qui assigne cet attribut au fur et à mesure de l'avancement de l'action mesurée.

Exemple d'utilisation

Pour les besoins de l'exemple on va entrer directement des valeurs à partir d'une liste et d'un champ d'entrée de texte, qui seront assignées à l'indicateur.

Création de l'indicateur:

<hbox style="padding:16px">
    <progressmeter id="MonPM" value="0%"/>
</hbox>

Ajout d'un champ d'entrée de texte et d'un bouton avec un attribut oncommand pour appeller la fonction de mise à jour du progressmeter:

<textbox id="inp" size="5" value="50" />
<button label="Changer" oncommand="setProgress(); " />

Le code JavaScript:

var inp = document.getElementById("inp");
var mpm = document.getElementById("MonPM");
	
function setProgress()
{
    var x = parseInt(inp.value);
    mpm.value = x;
}

On assigne les objets textbox et progressmeter à des variables (inp et mpm) pour pouvoir lire la valeur de l'un et l'assigner au second. Le texte entré est convertit en nombre entier par la fonction parseInt() car progressmeter attend une valeur numérique.
Dans une application réelle, la valeur sera obtenue par une fonction quelconque.

• Démo: code.zip