The goal is to display an animated loading screen with:
- a counter that goes up to 100%,
- a text transition (logo),
- images that animate in/out,
- then the smooth disappearance of the preloader to display the page.
Add the Code in Elementor
- In the WordPress dashboard, go to Elementor → Custom Code.
- Click on Add New.
- Name it, for example, “Preloader with a counter and an image”.
- Paste the code below.
- Set the location to
<head> - Publish.
<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>Explanation of Elements
.layout→ the full-screen preloading screen..counter→ the text that displays the progress..logo→ your word/logo that appears then disappears..img-contain img→ the animated images for entry and exit.
Easily Customize
Here are the parts of the code you can modify:
- Change the images: replace the URLs in the
<img src="...">tag. - Change the logo text: modify the content of
<div class="logo"><p>HELLO</p></div>. - Durations and timings:
delay: 4→ when the images appear,delay: 7→ when they disappear,duration: 1.5→ duration of the image animation.
- Counter speed: adjust the lines
Math.floor(Math.random() * 200) + 100→ decrease the values for the counter to go faster. - Logo text effect:
gsap.to(".logo p span", { top: "0", opacity: 1, ... })→ you can play withtop,opacity, andease.
Practical Tips
- Compress the preloader images (otherwise it can slow down the site).
- Choose a suitable background (
background: #101012;) to match your brand guidelines. - If you want the preloader to display only once per session, you can add a small script with
sessionStorage.
Built with Elementor
