Percentage Loader, une ravissante barre de progression avec jQuery et HTML5

Percentage Loader est un plugin jQuery léger (10Kn minified) qui permet d’afficher une superbe barre de progression circulaire via HTML5. Facilement mis en place, le widget propose plusieurs options pour contrôler le chargement du loader.

Un widget orienté design

Percentage Loader est avant tout un widget, c’est-à-dire que le script jQuery par défaut ne se charge pas d’animer la progression du loader, mais il propose des options et méthodes qui le permettent, le tout avec un design soigné via l’élément HTML5 canvas ; il faudra ajouter votre propre couche jQuery pour contrôler le déroulement du chargement. Il est possible d’exécuter plusieurs loaders simultanément.

Installation du loader

Commencez par inclure jQuery et Percentage Loader. Si vous souhaitez utiliser la même typographie que le plugin, vous pouvez inclure la feuille de style fournie avec le plugin qui contient l’appel à la police Bebas Neue (disponible sur Font Squirrel) via @font-face.

<script src="src/jquery.min.js"></script>
<script src="src/jquery.percentageloader-01a.js"></script>
<link rel="stylesheet" href="src/jquery.percentageloader-01a.css"></script>

Ensuite, vous définissez un élement HTML quelconque. Pour notre exemple, on définit également un bouton pour déclencher l’animation.

<div id="topLoader"></div>
<button id="animateButton">Animate Loader</button>

Puis vous faites appel au plugin avec un sélecteur de votre HTML. Par défaut, votre barre de progression sera statique ; il vous faudra alors utiliser les options et les fonctions du plugin pour contrôler et animer votre loader.

$("#topLoader").percentageLoader();	

Options et exemple d’animation

C’est le paramètre de callback onProgressUpdate qui va nous permetter d’animer la barre de progression. Pour cela, on va utiliser également deux fonctions, setValue() et setProgress(), qui permettent respectivement de mettre à jour la valeur de l’étiquette et la position de la barre.

Les options disponibles sont les suivantes :

  • progress : float qui définit la position de départ entre 0 et 1.0
  • value : string qui définit la valeur de l’étiquette
  • width : entier qui définit la largeur du loader (256px par défaut)
  • height : entier qui définit la hauteur du loader (256px par défaut)
  • controllable : booléan qui définit la modification du loader au clic (false par défaut)
  • onProgressUpdate(value) : fonction de callback pour mettre à jour le loader

Et voici un exemple dans lequel le chargement de la barre de progression est déclenché au clic du bouton :

$(function() {
   var $topLoader = $("#topLoader").percentageLoader({
      width: 256,
      height: 256,
      onProgressUpdate : function(val) {
         $topLoader.setValue(Math.round(val * 100.0));
      }
   });
   var topLoaderRunning = false;
   $("#animateButton").click(function() {
      if (topLoaderRunning) {
         return;
      }
      topLoaderRunning = true;
      $topLoader.setProgress(0);
      $topLoader.setValue('0kb');
      var kb = 0;
      var totalKb = 500;
	
      var animateFunc = function() {
         kb += 10;
         $topLoader.setProgress(kb / totalKb);
         $topLoader.setValue(kb.toString() + 'kb');
	  
         if (kb < totalKb) {
            setTimeout(animateFunc, 25);
         } else {
            topLoaderRunning = false;
         }
      }
      setTimeout(animateFunc, 25);
   });
});    

Percentage Loader est donc un petit script qui permet de mettre en place et contrôler une barre de progression assez tendance, pratique pour vos webdesign ou autres graphiques dynamiques.

Requis : jQuery 1.4+
Compatibilité : Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
Démonstration : http://widgets.better2web.com/loader/
Licence : BSD

Commentaires

  • Les

    Salut :)
    Quelle modification faire dans le code pour que le chargement démarre à l’ouverture de la fenêtre ?

    • Julien

      $(window).load(function(){
      a la place de
      $(« #animateButton »).click(function() {