Barre de progression HTML5

Une des lacunes du HTML a toujours été le manque de contrôle pour afficher une barre de progression. Avec le développement moderne des applications web et les requêtes asynchrones en AJAX, il était encore impossible d'imiter nativement le comportement des applications "desktop" sur l'évolution d'un processus, chose que vient rectifier la nouvelle balise <progress> en HTML5.



Dans peu de temps, on pourra dire adieu aux multiples contrôles JavaScript qui ont été inventés pour palier à ce manque, comme par exemple le plugin Progressbar dans jQueryUI (pour ne nommer que celui-là). Donc double avantage : plus léger à charger et possibilité de construire sur une base standard plus solide.

Pour une barre de progression graduée de 0 à 100, on écrira :

<progress id="pbar" value="0" min="0" max="100"></progress>

Contrairement à l'exemple de l'image plus haut, le pourcentage textuel à la droite ne fait pas parti du contrôle. Néanmoins, il faudra quand même contrôler en JavaScript la progression du processus et j'en ai profité pour écrire le pourcentage.

HTML

<progress id="pbar" value="0" min="0" max="100"></progress>
<span id="txtPcnt">0%</span>

JavaScript

$j = jQuery.noConflict();
$j(document).ready( progress );

function progress(){
   var pbar = document.getElementById('pbar');
   var pcntLabel = document.getElementById('txtPcnt');
   var pcnt = 0;

   var intervalId = setInterval(
    function(){
        pcnt += 10;

        if(pcnt <= pbar.max){
           pbar.value = pcnt;
            pcntLabel.innerHTML = pcnt.toString() + '%';
        }
       else{
            clearInterval(intervalId);
        }
    , 500);
}

Compatibilité

À ce jour, cet exemple ne fonctionnait que sous Chrome (testé avec la version 6). J'ai aussi rencontré un problème avec jQuery 1.4.2 : si je remplace document.getElementById('pbar') par la notation $j('#pbar'), l'exécution s'arrête. En inspectant ce qui se passe sous Chrome avec Firebug Lite, la référence à l'objet du DOM semble bien créée mais il ne reconnaît pas les propriétés de la balise.

Aussi, j'ai été obligé d'utiliser setInterval() pour arriver à faire progresser le visuel de la barre car dans une boucle for ou while, si on utilise une fonction de pause pour simuler le processus et nous laisser le temps de voir l'effet, seul le résultat final est affiché à la toute fin.

Exemple incorrect

function pause(milliseconds){
   var dt = new Date();
   while ((new Date()) - dt <= milliseconds){}
}

var pcnt=0;
while(pcnt<=100){
   pcnt+=10;
   document.getElementById('pbar').value = pcnt;
   pause(250); // problème!
}

C'est bien la fonction pause() qui cause problème ici car si on remplace l'appel par alert(), on verra la barre de progression se remplir à chaque itération. Allez savoir pourquoi!