Pour commencer l’année en douceur, je vous propose un peu de code pour mettre en place une jauge de pourcentage. Vous les avez déjà sûrement croisées sur les sites ; ils permettent de vous mettre en attente lors d’un téléchargement, ou plus précisément pour vous informer de l’état d’une donnée bien spécifique. Voilà comment je ferais de mon côté, pour implémenter un tel élément.
Bien sûr, il existe des librairies Javascript pour faire le travail. En effet, si vous devez réaliser des graphiques plus compliqués qu’une simple jauge de pourcentage, je pourrais vous proposer d’aller voir « Chart JS » ou la librairies de Google : Google Charts. Dans mon cas, je voudrais simplement coder une simple barre horizontale et qui s’animerait jusqu’à atteindre la valeur indiquée. Je vous propose mon code sur Codepen.
See the Pen Jauge de pourcentage by Merlin (@lintermediaire) on CodePen.
Pourquoi avoir utilisé Javascript ?
C’est vrai, nous aurions pu nous passer du langage Javascript pour faire apparaître une jauge. Mais si vous devez faire apparaître plusieurs données sur votre page, Javascript est tout indiqué pour les rendre dynamiques. Ainsi, si nous nous mettons à la place d’un intégrateur, il est plus adéquat de procéder comme les autres librairies précitées. Ce sont en effet des librairies Javascripts qui vous permettent de modifier l’HTML très simplement, à condition de mettre les données appropriées pour vois apparaître l’effet voulu, et les paramètres qui s’y attachent. Dans mon cas, j’ai 5 paramètres/propriétés à définir :
- La hauteur de la barre (chiffre)
- La couleur de fond (sous toutes les formes valide par le CSS)
- La couleur de la barre de progression (sous toutes les formes valide par le CSS)
- La vitesse (chiffre)
- Et la valeur jusqu’où la barre doit aller (chiffre) (soit, le pourcentage)
Ainsi, si je transforme mon code en librairie Javascript, je pourrai définir au mieux ces propriétés, en prévoir par défaut, la rendre plus compréhensible pour les codeurs. (exemple : mettre une hauteur de 1px par défaut. En effet, à zéro, rien n’apparaîtra !)
Le code
Avec Javascript, vous pouvez générer du CSS. Ici, je génère du CSS pour jouer sur la hauteur et les couleurs. Le Javascript me permet d’ajouter de l’animation et surtout un élément HTML positionné à l’arrière de la jauge afin de rendre plus visible la largeur de la section, si c’est souhaité. C’est la classe (class=) « js_progressBar » qui lie l’HTML et le Javascript. La suite ? Comme expliqué, en faire une petite librairie. Mais au vu du nombre de librairies déjà existantes, nous pouvons nous en arrêter là et l’intégrer à Pumpskin par exemple.
