Préchargement avec un compteur et une image

L’objectif est d’afficher un écran de loading animé avec :

• un compteur qui monte jusqu’à 100%,
• une transition de texte (logo),
• des images qui entrent/sortent en animation,
• puis la disparition fluide du préchargeur pour afficher la page.

Ajouter le code dans Elementor

1. Dans le tableau de bord WordPress, allez dans Elementor → Code personnalisé.
2. Cliquez sur Ajouter un nouveau.
3. Nommez-le par exemple “Préchargeur avec un compteur et une image”.
4. Collez le code ci-dessous.
5. Réglez l’emplacement sur <head>
6. Publiez.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

<style>
.layout {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: #101012;
  display: flex; justify-content: center; align-items: center;
  z-index: 10000;
}
.overlay-content { width: 85%; }
.images { position: relative; height: 50vh; }
.img-contain { position: relative; width: 40%; height: 100%; margin: 0 auto; z-index: 1000; clip-path: polygon(0 0,100% 0,100% 100%,0% 100%); }
.img-contain img { position: absolute; top: 0; left: -110%; }

.text { position: relative; margin: 1em 0; clip-path: polygon(0 0,100% 0,100% 100%,0% 100%); }
.counter, .logo p {
  font-size: 10rem; text-align: center; text-transform: uppercase;
  font-family: "Sora", Sans-serif; font-weight: 700;
}
.counter p { line-height: 100%; }
.counter p span, .logo p span { position: relative; z-index: 9999; color: white; }
.logo { position: absolute; top: 0%; left: 50%; transform: translateX(-50%); }
.logo p { line-height: 100%; }
.logo p span { position: relative; top: 200px; opacity: 0; }
</style>

<div class="layout">
  <div class="overlay-content">
    <div class="images">
      <div class="img-contain">
        <img src="https://images.pexels.com/photos/18131871/pexels-photo-18131871.jpeg?w=800&auto=compress&cs=tinysrgb" alt="" />
        <img src="https://images.pexels.com/photos/18398708/pexels-photo-18398708.jpeg?w=800&auto=compress&cs=tinysrgb" alt="" />
        <img src="https://images.pexels.com/photos/18131896/pexels-photo-18131896.jpeg?w=800&auto=compress&cs=tinysrgb" alt="" />
      </div>
    </div>
    <div class="text">
      <div class="counter"><p>100%</p></div>
      <div class="logo"><p>HELLO</p></div>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  splitTextIntoSpans(".logo p");

  // entrée des images
  gsap.to(".img-contain img", {
    left: 0, stagger: 0.1,
    ease: "power4.out", duration: 1.5, delay: 4,
  });

  // sortie des images
  gsap.to(".img-contain img", {
    left: "110%", stagger: -0.1,
    ease: "power4.out", duration: 1.5, delay: 7,
  });
});

function splitTextIntoSpans(selector) {
  var element = document.querySelector(selector);
  if (element) {
    var text = element.innerText;
    element.innerHTML = text.split("").map(char => `<span>${char}</span>`).join("");
  }
}

function startLoader() {
  var counterElement = document.querySelector(".counter p");
  var currentValue = 0;

  function updateCounter() {
    if (currentValue === 100) { animateText(); return; }

    currentValue += Math.floor(Math.random() * 10) + 1;
    currentValue = currentValue > 100 ? 100 : currentValue;

    counterElement.innerHTML =
      currentValue.toString().split("").map(char => `<span>${char}</span>`).join("") + "<span>%</span>";

    setTimeout(updateCounter, Math.floor(Math.random() * 200) + 100);
  }

  function animateText() {
    setTimeout(() => {
      gsap.to(".counter p span", { top: "-400px", stagger: 0.1, ease: "power3.inOut", duration: 1 });
      gsap.to(".logo p span", { top: "0", opacity: 1, stagger: 0.1, ease: "power3.inOut", duration: 1 });
      gsap.to(".logo p span", { top: "-400px", stagger: 0.1, ease: "power3.inOut", duration: 1, delay: 3 });
      gsap.to(".layout", { opacity: 0, ease: "power3.inOut", duration: 1, delay: 4 });
    }, 300);
  }

  updateCounter();
}
startLoader();
</script>

Explications des éléments

• .layout → l’écran de préchargement plein écran.
• .counter → le texte qui affiche la progression.
• .logo → ton mot/logo qui apparaît puis disparaît.
• .img-contain img → les images animées en entrée et sortie.

Personnaliser facilement

Voici les parties du code que tu peux modifier :

• Changer les images : remplacer les URLs dans la balise <img src="...">.
• Changer le texte du logo : modifie le contenu de <div class="logo"><p>HELLO</p></div>.
• Durées et timings :
  • delay: 4 → quand les images apparaissent,
  • delay: 7 → quand elles disparaissent,
  • duration: 1.5 → durée de l’animation des images.
• Vitesse du compteur : ajuster les lignes Math.floor(Math.random() * 200) + 100 → diminue les valeurs pour que le compteur aille plus vite.
• Effet texte logo : gsap.to(".logo p span", { top: "0", opacity: 1, ... }) → tu peux jouer avec top, opacity et ease.

Conseils pratiques

• Compresse les images du préchargeur (sinon ça peut ralentir le site).
• Choisis un fond adapté (background: #101012;) pour matcher avec ta charte graphique.
• Si tu veux que le préchargeur ne s’affiche qu’une seule fois par session, tu peux ajouter un petit script avec sessionStorage.