Meter et progress HTML5

meter

La balise <meter> peut être utilisée pour fournir l'affichage graphique pour une valeur particulière. Cela fait le choix idéal pour des choses comme les scores de quizz par exemple, etc.

<meter min="0" max="100" value="50"></meter>

meter html5

En outre, nous pouvons spécifier une plage pour les mesures considérés comme faible, moyen ou une valeur considérés comme élevées. Cela permettent également de conditonner la couleur de l'affichage.

<meter min="0" max="20" low="8" high="16" optimum="20" value="2">2/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="10">10/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="20">20/20</meter>

2/20 10/20 20/20

Progress

Si l'élément <output> est utilisé pour afficher le résultat d'un calcul, l'élément <progress> devrait représenter 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. 

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

Si le navigateur ne supporte pas l'élément, son contenu sera affiché à la place. Prenons l'exemple:

Code HTML5:

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

Code JavaScript:

var i = 0;    
var barre = document.getElementById('barre');  
var avancement = document.getElementById('avancement');
 
function StartProgress(){
  MyTimeOut = setTimeout('Progress()', 500);
}
 
function Progress(){ 
  i += 5;
  if(i <= barre.max){
     barre.value = i;
     avancement.innerHTML = i.toString() + ' %';
     MyTimeOut = setTimeout('Progress()', 500);
  }
}