Balise PROGRESS : barre de progression

« Partie précédente | Index | Partie suivante »

Tag de fermeture obligatoire | Support :

La balise <progress> permet de montrer l'état d'avancement d'une tâche ou d'une action au moyen d'une barre de progression. Il est possible d'animer la progression de la barre en utilisant le javascript, soit sur des évènements spécifiques, soit sur un simple timeout (comme dans l'exemple).

Pour afficher une mesure de façon visuelle et non une progression, il faut utiliser la balise <meter> qui permet un rendu sous la forme d'une jauge avec des attributs spécifiques pour le rendu.

Propriétés pour la balise progress :

Propriétés	Définition	Valeurs
max	Valeur maximale de la barre de progression	valeur
position	Pourcentage d'avancement de la barre de progression (lecture seule)	valeur
value	Valeur actuelle de la progression	valeur

Exemples d'utilisation de la balise progress :

Utilisation de la balise progress pour une progression de 0 à 100 :
Avec le style par défaut de la balise progress :

<progress id="barre-progression" max="100" value="0"></progress>
<span id="lbl-avancement">0 %</span>
<input type="button" value="Démarrer la progression" onclick="StartProgress();" />

Avec un style personnalisé et le positionnement de l'avancement sur la barre de progression :

<div style="position:relative; display:inline-block;">
   <progress id="barre-progression-style" max="100" value="0"
         style="position:relative; height:25px; width:400px;"></progress>
   <span id="lbl-avancement-style" style="position:absolute; line-height:25px;
         left:190px; top:2px; font-size:18px;">0 %</span>
</div>
<input type="button" value="Démarrer la progression" onclick="StartProgressStyle();" />

Utilisation de la balise progress pour une progression de 0 à 100 :
Avec le style par défaut de la balise progress :

0 %

Avec un style personnalisé et le positionnement de l'avancement sur la barre de progression :

0 %

Tous les Tags HTML