I’ve got a preloader for my site that works but is just counting from 0-100 with a timer and then the content is displayed, is it possible to amend my code so that it runs from 0-100 while the content is actually loading and only shows the content once loaded?
let counter = 0;
const loaderTimer = setInterval(function() {
counter++;
jQuery(".preloader__container__percent").text(counter + "");
if(counter == 100){
clearInterval(loaderTimer);
gsap.to(".preloader", 1, { delay: 0.5, y: "-100%" });
}
}, 25);.elementor-editor-active .preloader {
display: none;
}
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #f2f2f2;
background-color: #ff635e;
z-index: 999;
}
.preloader__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.preloader__container__percent {
font-family: "Alliance Black Italic", Sans-serif;
font-size: 15vw;
}
@media only screen and (max-width: 1024px) {
.preloader__container__percent {
font-family: "Alliance Black Italic", Sans-serif;
font-size: 20vw;
}
.preloader__container__preload {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preloader">
<div class="preloader__container">
<h1 class="preloader__container__percent"></h1>
</div>
</div>