Comment Créer un Loader Animé sur Shopify

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 6 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 7 commentaires

  1. fabien

    19 Mar 2021 Répondre

    salut et merci

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

    je suis sur theme debut

    1. Dgeo Dev

      22 Mar 2021 Répondre

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

  2. Nico

    21 Mar 2021 Répondre

    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. Dgeo Dev

      22 Mar 2021 Répondre

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

  3. Flo

    14 Avr 2021 Répondre

    Merci beaucoup pour ce tuto! Ton contenu est génial!

    Petite question, est-il possible d’utiliser le logo (favicon ) de la marque en tant que loader ?
    Y’a t’il une fonction de loader intégrée à Speedfly ?
    Merci d’avance!

    1. Dgeo Dev

      15 Avr 2021 Répondre

      Hello, oui c’est potentiellement possible 🙂 pas besoin de Loader avec Speedfly il est trop rapide :p

  4. Benji

    22 Avr 2021 Répondre

    Salut Dgeo,

    Encore une supère vidéo, franchement merci!

    Par contre j’ai un p’tit bug, j’ai cumulé la barre d’infos dynamique (avec les phrases qui changent) et ce loader animé et bizarrement lorsque le loader est actif la barre aussi…
    C’est la seule chose qui est visible en même temps que le rond et je sais pas pourquoi..! Tout le reste apparaît lorsque celui-ci disparaît sauf cette barre!!!

    Tu peux m’aider stp?

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