html5 tutorial : afficher une barre de progression en html5 et javascript

 

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

 

Prérequis

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

 

La balise html5 progress

Un barre de progression permet de donner 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) :

en cours

En l’absence de propriété, la jauge ne progresse pas : elle fait des va-et-vient de gauche à droite.

 

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 qui 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 qui représente la valeur maximale de la progression que nous initialisons à 200;
currentProgression qui 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.

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

Puis nous créons une fonction initialisation qui initialise :
– l’objet progressBar à partir de la balise déclarée en HTML5 en utilisant 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.

var 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.

var 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.

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

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 allons stopper les appels à displayBar dès que la barre de progression sera pleine. Nous modifions donc la fonction displayBar comme suit :

var 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 qui appelle la fonction d’initialisation et qui instaure l’appel toutes les 100 millisecondes de la fonction displayBar :

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

Le source complet est téléchargeable ici.

 

Conclusion

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.

 
[important]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.[/important]

 

Posté dans html5Taggé barre d'avancement html5, faire des jeux, html progressbar, html5 et javascript, html5 progress bar, html5 progressbar, html5 tutorial, jauge de progression, jauge html5  |  1 commentaire

Une réponse à "html5 tutorial : afficher une barre de progression en html5 et javascript"

Répondre