Afficher une barre de progression

en javascript html5

Dans cet article, je vous montre comment afficher une barre de progression à l’aide de html et Javascript.

 

Prérequis pour afficher une barre de progression

– au moins un navigateur compatible sous la main;
– connaitre le code html et en pratiquer un peu;
– savoir ce qu’est le code Javascript et le pratiquer un peu.

 

La balise html5 progress

Un barre de progression donne une vue en temps réel de l’exécution d’une tâche.
Elle permet par exemple, de suivre en temps réel le chargement d’une série d’images ou de vidéos ou encore le téléchargement d’un fichier.

La barre de progression s’utilise donc dans un contexte dynamique pour permettre l’avancée, en temps réel, de la jauge.

 

Syntaxe et propriétés

La syntaxe

<progress value="150" max="200">75%</progress> 

donne à l’affichage (si votre navigateur est compatible).

75%

La valeur maximale atteignable sur la barre de progression est représentée par la propriété max. Lorsque cette valeur est atteinte, la barre de progression est complète.

La jauge de la barre de progression est représentée par la propriété value. Cette valeur est toujours relative à la propriété max. Pour une valeur de max initialisée à 200, le quart de la barre est rempli pour une value à 50. Cette valeur n’est donc pas un pourcentage.

La syntaxe.

<progress></progress> 

donne à l’affichage (si votre navigateur est compatible).

L’API Javascript de progress

L’API met à disposition du développeur un objet Progress.

Cet objet expose :
– les propriétés value et max en lecture/écriture : on peut consulter ou modifier les valeurs;
– la propriété position en lecture renvoie une valeur entre 0 et 1. Le pourcentage d’avancement de la progression.

 

Un petit exemple de HTML 5 progress

Nous déclarons la balise de la barre de progression comme suit.

<body>
 <progress id="progressBar"></progress>
</body>

Puis nous créons 4 variables :
maxBar représente la valeur maximale de la progression que nous initialisons à 200;
currentProgression représente la progression courante. La barre que nous initialisons à 0 (valeur de départ);
progressBar qui représente l’objet Javascript de la barre de progression;
intervalId qui sera explicitée plus loin dans l’article.

let maxBar = 200;
let currentBar = 0;
let progressBar;
let intervalId;

Puis nous créons une fonction initialisation qui initialise :
– l’objet progressBar à partir de la balise déclarée en HTML5 qui utilise la propriété id (cet objet est une représentation Javascript de la balise déclarée);
– les propriétés de l’objet à partir des variables déclarées ci-dessus.

let initialisation = function() {
  progressBar = document.getElementById( "progressBar" );
  progressBar.value = currentBar;
  progressBar.max = maxBar;
}

Enfin, nous créons une fonction displayBar qui fait progresser de 1 unité la barre de progression. Pour permettre une croissance continue, cette fonction devra être appelée à intervalle régulier.

let displayBar = function() {
  currentBar++;
  progressBar.value = currentBar;
}

L’appel à intervalles régulier de la fonction displayBar se fait par le biais de la fonction javascript setInterval qui prend en paramètres le nom de la fonction et la fréquence d’appel en millisecondes.

// displayBar est appelée toutes les 100 millisecondes
intervalId = setInterval( displayBar , 100 ); 

Cette fonction renvoie un identifiant qui nous permettra de stopper ces appels et que nous stockons dans la variable intervalId. L’arrêt de ces appels se fait par le bais de la fonction clearInterval qui prend en paramètre un identifiant, en l’occurrence intervalId.

Nous stoppons les appels à displayBar dès que la barre de progression est pleine. Nous modifions donc la fonction displayBar.

let displayBar = function() {
  currentBar++;
  if (currentBar > maxBar) {
    clearInterval( intervalId );
  }
  progressBar.value = currentBar;
}

Enfin nous lançons notre exemple au chargement de la page par le biais de l’évènement onload . Celui ci appelle la fonction d’initialisation et instaure l’appel toutes les 100 millisecondes de la fonction displayBar.

window.onload = function() {
  initialisation();
  intervalId = setInterval( displayBar , 100 );
}

Un exemple d’utilisation d’une barre de progression pour le chargement d’images est développé dans l’article Une barre de progression HTML5 pour le chargement de vos images.

 
Vous avez vu comment afficher une barre de progression. Il est encore possible d’aller plus loin sur la progress bar html5. Notamment sur sa forme avec les feuilles de styles. N’hésitez pas à partager vos essais.

 

Ne rate pas cette chance

 

Reçois ton livre GRATUIT pour créer des jeux vidéo.

Bravo, jette un œil à ta boite mail pour télécharger ton guide.