(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Don’t want to make from scratch? Buy the template instead 🙂
Logo Fill Preloader – Elementor, Pace JS and GSAP
In this tutorial, we will be making a simple preloader that fills up logo based on how much page has been loaded. For simplicity, we will use 2 images and use pace js library for our preloader.
JS and GSAP Code
- dm-preloader-11 is the CSS class of Preloader Container.
- dm-preloader-11-first-logo is the CSS class of the logo that needs to be shown by default.
- dm-preloader-11-second-logo is the CSS class of the logo that needs to be revealed as page load progresses.
- dm-preloader-counter-11 is the CSS class of the heading widget that shows the counter in percentage. Make sure to select the HTML tag as p.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<style>
.dm-preloader-11-first-logo {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: none !important;
}
.dm-preloader-11-second-logo {
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
transition: none !important;
}
.dm-preloader-11 {
transition: none !important;
}
</style>
<script>
let isGsapFinished11 = false;
let isProgressFinished11 = false;
const dmPreloader11 = document.querySelector('.dm-preloader-11');
const dmPreloader11FirstLogo = document.querySelector('.dm-preloader-11-first-logo');
const dmPreloader11SecondLogo = document.querySelector('.dm-preloader-11-second-logo');
Pace.on("progress", function (percent) {
const preloaderText11 = document.querySelector(".dm-preloader-counter-11 .elementor-heading-title");
preloaderText11.textContent = `${Math.floor(percent)}%`;
let revealValue = 100 - percent;
dmPreloader11FirstLogo.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${revealValue}%, 0% ${revealValue}%)`;
dmPreloader11SecondLogo.style.clipPath = `polygon(0% ${revealValue}%, 100% ${revealValue}%, 100% 100%, 0% 100%)`;
});
Pace.on('done', function () {
isProgressFinished11 = true;
onPreloader11Completion();
});
function onPreloader11Completion() {
if (isProgressFinished11) {
gsap.to(dmPreloader11, {
delay: 1,
y: '-100%',
duration: 1,
ease: 'power3.out',
onComplete: () => {
dmPreloader11.style.display = 'none';
}
})
}
}
</script>
