Créer des loaders qui suivent le défilement (scroll) des pages avec jQuery et CSS 3

Mathieu Chartier 25 août 2016 à 14:32 Tutoriels illustrés 3 commentaires

Les loaders (barres de chargement, cercle de chargement...) sont très nombreux sur le web mais beaucoup sont réalisés par des webdesigners en Gif et ne s'appuient pas sur des valeurs variables. Il s'agit souvent de loaders continus et infinis et quand vous avez besoin de créer un loader personnalisé et évolutif, c'est souvent moins simple à réaliser.

La grande mode est de créer des barres de chargement relatives à la lecture des contenus (en fonction du niveau de scroll), donc il me semblait intéressant de vous montrer une technique simple pour aboutir à ce résultat. Il faut bien avouer que cela peut s'avérer très pratique. En matière d'UX Design, cela apporte une touche d'ergonomie supplémentaire et qui peut motiver (ou rebuter) les lecteurs selon la longueur des contenus.

Avant de coder mes loaders à la main, j'ai d'abord cherché ce qui existait mais souvent, le code était lourd pour ce que c'est faire, et surtout, pas toujours adapté ou compatible. Je reviendrai d'ailleurs sur certains points de détails lors des étapes du tutoriel. Notre objectif est de créer les trois modèles présents dans la capture ci-dessous. Le plus technique étant le cercle de chargement...

Créer barres et cercles de chargement lors du scroll (défilement) des pages et des contenus

Les barres de chargement sont réalisées en HTML et CSS 3 pour le rendu visuel et jQuery pour la partie technique (détection du scroll et calcul du pourcentage). Elles sont compatibles avec tous les navigateurs. Seul le cercle de chargement n'est compatible que jusqu'à IE 10 à cause des background multiples et du linear-gradient.

Télécharger “Barres et cercle de chargement lors du scroll”chargement-1.html – Téléchargé 1471 fois – 4,53 Ko

Étape n°1

Ajouter le code HTML pour les trois barres, qui correspondent respectivement aux loaders du Gif ci-dessus :

  • barre-1 : défilement horizontal en haut de page ;
  • barre-2 : défilement vertical à gauche ;
  • barre-3 : cercle de chargement au centre.
<div id="barre-1"><div class="progression"></div><div class="pourcentage"></div></div>
<div id="barre-2"><div class="progression"></div><div class="pourcentage"></div></div>
<div id="barre-3"><div class="progression"><div class="pourcentage"></div></div></div>

Étape n°2

Ajouter le CSS 3 par défaut de l’ensemble des barres de chargement. Vérifiez bien les correspondances selon le loader qui vous intéresse.

N’oubliez pas d’avoir un document qui nécessite un défilement (scroll). Pour ma part j’ai créé un document vide dans lequel j’ai mis une height de 1500px à body.

#barre-1 {position:fixed; top:0; height:40px; width:100%; background:#222; border:2px solid #222;}
#barre-1 .progression {background:#007db7; width:0%; height:100%; transition:width 0.3s;}
#barre-1 .pourcentage {position:absolute; top:0; font-size:1.5em; line-height:1.5em; text-align:center; width:100%; color:#fff;}

#barre-2 {position:fixed; top:80px; left:25%; height:200px; width:80px; background:#222; border:2px solid #222;}
#barre-2 .progression {background:#007db7; width:100%; height:0%; transition:width 0.3s;}
#barre-2 .pourcentage {position:absolute; top:0; font-size:1.5em; line-height:200px; text-align:center; width:100%; color:#fff;}

#barre-3 {position:fixed; top:80px; width:200px; margin-left:-100px; left:50%;}
#barre-3 .progression {width:200px; height:200px; border-radius:50%; background-color:#222; border:2px solid #222;}
#barre-3 .pourcentage {position:absolute; width:160px; height:160px; background-color:#fff; border-radius:50%; margin-left:19px; margin-top:19px; text-align:center; line-height:160px; font-size:2em; border:2px solid #222}

Étape n°3

Ajoutez un lien vers jQuery pour que le code qui suivra soit compatible, puis préparer l’accueil du code jQuery (ouverture du script).

<script type="application/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="application/javascript">
(function() {
})(jQuery);
</script>

Étape n°4

Ajouter une fonction de calcul du pourcentage de la hauteur de document parcourue par l’utilisateur.

Je créé une fonction au sein de l’appel jQuery pour optimiser la longueur et la gestion du code. Cette fonction retourne la valeur du pourcentage.

function calculPourcentageHauteur() {
	var hauteurDocument = $(document).height(); // Hauteur du document complet
	var hauteurFenetre = $(window).height(); // Hauteur de la fenêtre courante (viewport)
	var position = $(window).scrollTop(); // Position haute au moment du scroll
	var positionDernierEcran = hauteurDocument - hauteurFenetre; // Position haute du dernier écran visible
	var ratioHauteur = position / positionDernierEcran; // Ratio de la hauteur
	var pourcentageHauteur = Math.floor(ratioHauteur * 100); // Pourcentage de la hauteur

	// Affichage de l'évolution du pourcentage de la hauteur dans la console (optionnel)
	console.log("Pourcentage de la hauteur parcourue : " + pourcentageHauteur + "%");

	return pourcentageHauteur;
}

Étape n°5

De l’importance du calcul…

J’ai vu beaucoup de formules mathématiques erronées lors de mes recherches, il faut absolument que le ratio de la hauteur (ratioHauteur ici) arrive à 1 pile quand le scroll est terminé. Je vous assure qu’aucun code que j’ai vu ne le faisais, à ma grande surprise, ce qui fausse les résultats.

Ratio de scroll en jQuery dans la console

Étape n°6

Barre de chargement horizontale

Ajoutez le code ci-contre pour créer une fonction pour la barre de défilement horizontale (barre-1). Elle sera appelée dans l’étape 10.

L’astuce est uniquement de modifier dynamiquement la valeur du width du bloc html « chargement » lors du scroll de la page.

// Barre de défilement horizontale en fonction du scroll
function barreDefilement() {
	var cible = $("#barre-1 .progression");
	cible.css({
		"width": calculPourcentageHauteur()+"%"
	});
	$("#barre-1 .pourcentage").html(calculPourcentageHauteur()+"%");	
}

Étape n°7

Jauge de chargement verticale

Même principe que pour la barre de chargement horizontale, sauf qu’on joue avec le height cette fois.

Cette fonction aussi sera appelée à l’étape 10.

// Jauge verticale de défilement classique en fonction du scroll
function jaugeDefilement() {
	var cible = $("#barre-2 .progression");
	cible.css({
		"height": calculPourcentageHauteur()+"%"
	});
	$("#barre-2 .pourcentage").html(calculPourcentageHauteur()+"%");	
}

Étape n°8

Cercle de chargement CSS 3

Ce cas est plus « tordu » car il existe plusieurs méthodes pour faire un loader circulaire ou rond (canvas, propriété clip, etc.). J’ai opté pour la solution qui me semblait la plus simple, mais elle présente des défauts de compatibilité avec nos IE 9 et inférieurs…

L’objectif est de créer un dégradé linéaire net qui suit le chargement des contenus de la page selon le scroll. Il faut donc jouer avec l’astuce des background multiples. Je ne vous détaille pas le pourquoi du comment des valeurs car c’est assez tordu, mais le résultat est là… :D

// Cercle de défilement en fonction du scroll
function cercleDefilement() {
	// Conversion des pourcentages en degrés de rotation
	var boucle = 100 / calculPourcentageHauteur();
	var incrementation = Math.round(360 / boucle);
	var degre = (90 + incrementation) // On ajoute 90deg pour partir du haut

	var cible = $("#barre-3 .progression");
	if(incrementation < 180) { 
		cible.css({
			'background-image':'linear-gradient(90deg, #222 50%, transparent 50%), linear-gradient('+degre+'deg, #007db7 50%, #222 50%)',
			'background':'-moz-linear-gradient(90deg, #222 50%, transparent 50%), -moz-linear-gradient('+degre+'deg, #007db7 50%, #222 50%)',
			'background':'-webkit-linear-gradient(90deg, #222 50%, transparent 50%), -webkit-linear-gradient('+degre+'deg, #007db7 50%, #222 50%)',
		});
	} else {
		cible.css({
			'background-image':'linear-gradient('+degre+'deg, #007db7 50%, transparent 50%), linear-gradient(270deg, #007db7 50%, #222 50%)',
			'background':'-moz-linear-gradient('+degre+'deg, #007db7 50%, transparent 50%), -moz-linear-gradient(270deg, #007db7 50%, #222 50%)',
			'background':'-webkit-linear-gradient('+degre+'deg, #007db7 50%, transparent 50%), -webkit-linear-gradient(270deg, #007db7 50%, #222 50%)',
		});
	}
	$("#barre-3 .pourcentage").html(calculPourcentageHauteur()+"%");
}

Étape n°9

Voici le rendu final de ce loader si particulier. L’autre méthode qui semble la plus pratique à mettre en oeuvre fonctionne avec la propriété clip. L’idée étant là, vous pourrez l’adapter si besoin…

Cercle de chargement lors du scroll d'une page

Étape n°10

Chargement des loaders jQuery

La dernière étape consiste tout simplement à charger le type de barre de chargement qui nous intéresse.

Pour ce faire, il suffit d’utiliser la méthode .on() de jQuery en cumulant les événements « load » et « scroll ». Ainsi, la taille de la jauge correspond au niveau de scroll lors du chargement des pages ou du défilement.

// Chargement des fonctions lors du chargement et du scroll
$(window).on("load scroll", function() {
	barreDefilement(); // Barre-1
	jaugeDefilement(); // Barre-2
	cercleDefilement(); // Barre-3
});

Conclusion

Tous ces codes peuvent être adaptés pour suivre la hauteur d’un bloc plutôt que d’une fenêtre par exemple, mais l’objectif est d’accompagner les lecteurs dans leur parcours de lecture avec un loader efficace et simple. Amusez-vous bien !