Accueil    HTML    Balise progress
 



balise progress  Balise PROGRESS : barre de progression

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


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



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 %