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  base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

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, global.js, ou theme.js.

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: 4.7 sur 7 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 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 11 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?

  5. nico

    15 Sep 2021 Répondre

    salut dgeodev , j’aimerais mettre mon logo mais je ne sais pas comment m’y prendre ?

    1. Dgeo Dev

      15 Sep 2021 Répondre

      Hello, hum c’est un peu compliqué 🙁 faudrait un mini dev sur mesure

  6. CURTIS

    12 Déc 2021 Répondre

    salut ! merci pour tout ces tutos t un gg ! j’ai un petit problème , le loader met effectivement du temp a s’afficher sur la page ( avant le chargement complet ) , il y a un décalage de 2 ou 3 secondes , du coup , le client voit quelques caractéristiques du site qui ne doit pas vois , comme l’ancien menu qui est maintenant géré par une appli 🙁
    merci de ta réponse et passe une bonne journée
    curtis

    1. Dgeo Dev

      14 Déc 2021 Répondre

      Hello et merci pour le com 🙂 hum c’est que le site est trop lent. L’idéal serait de l’optimiser un peu ou prend Speedfly :p Sinon essayer dans la partie js de modifier la valeur 2000 par 3000 ou plus.

Laisser un commentaire

Fermer le menu