Nous allons voir dans ce tutoriel comment créer une icône de pré-chargement du site afin de faire patienter vos visiteurs. Ce système va calculer le poid total de votre page et afficher un petit loader animé afin de faire clairement comprendre à vos visiteurs que le site va bientôt arriver :p

Installation des codes

L’installation des codes va se passer en 3 parties:

  • CSS, la mise en forme,
  • Javascript, le fonctionnement,
  • Html, l’affichage.

Partie CSS

Rendez-vous dans Boutique en Ligne – Actions – Modifier le code et trouvez le dossier Assets.

Repérez un fichier  .css, .css.liquid ou .scss, scss.liquid ! généralement theme, style ou timber.

Une fois le fichier trouvez mettez-vous tout en bas et copiez/collez le code ci-dessous:


.fullpageLoader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullpageLoader .fullpageLoader__item {
  position: relative;
}
.fullpageLoader .fullpageLoader__item:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.fullpageLoader--invisible {
  opacity: 0;
}
.fullpageLoader .dgLoader {
  border: 10px solid #f3f3f3;	
  border-top: 10px solid #999;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: dgLoaderRotate 2s linear infinite;
}
@keyframes dgLoaderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Partie Javascript

Toujours dans le même dossier Assets et essayez de trouver la même chose mais cette fois ci en .js ou .js.liquid.

Mettez-vous tout en bas et copiez/collez le code suivant:

(function() {
  const dgloaderContainer = document.querySelector('.fullpageLoader');
  document.addEventListener('readystatechange', (event) => {	
    const readyState = "complete";    
    if(document.readyState == readyState) {		
      dgloaderContainer.classList.add('fullpageLoader--invisible');		
	  setTimeout(()=>{			
        dgloaderContainer.parentNode.removeChild(dgloaderContainer);
	  }, 2000)
    }
  });
})();

Partie HTML

Cette fois, ouvrez le dossier Layout et le fichier theme.liquid et repérez la balise body: <body…> et placez la ligne de code sur la ligne suivante:

  <div class="fullpageLoader"><div class="fullpageLoader__item"><div class="dgLoader"></div></div></div>

Besoin de plus de détails ?

Je vous invite à visionner la vidéo ci-dessous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 5 votes]

Cet article a 4 commentaires

  1. salut et merci

    Oups! le loader tourne mais ne disparait pas (page bloqué)

    je suis sur theme debut

    1. Hello, dans ce cas Il doit y avoir un conflit js… Je conseille de retirer le code du tuto

  2. Tu apportes tellement de valeur mec… Vraiment merci pour ton contenu continues à toi ! Je te vois souvent sur le forum français, moi je suis plus sur le forum américain que Français je trouve le niveau assez bas en France mention spéciale à ketankumar lol

    1. Hello et merci pour le com c’est sympa 😉 Oui en france y a quasiment rien 🙁

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine