Attempt to build a page loader simliar to the following example, using GSAP for animations https://sabor-del-mar-hotel-template.webflow.io/rooms/the-view-suite
If Javascript is disabled, the page is stuck on the loading overlay
##Some references: https://css-tricks.com/lets-make-a-fancy-but-uncomplicated-page-loader/
<style>
p {
margin-bottom: 15px;
}
</style>
<div class="preloader fixed inset-0 bg-gray-200 z-50 flex items-center justify-center" style="pointer-events: none;">
<div class="loader-text">
Loading...
<div class="line w-0 h-2 bg-green-600"></div>
</div>
</div>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a target="_blank" href="https://google.com">link</a>
</p>
<img class="" src="https://source.unsplash.com/random/1000x500" alt="Random Image">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class="lazyload" data-src="https://source.unsplash.com/random/1000x500" alt="Random Image">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class="lazyload" data-src="https://source.unsplash.com/random/1000x500" alt="Random Image">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" integrity="sha512-JrL1wXR0TeToerkl6TPDUa9132S3PB1UeNpZRHmCe6TxS43PFJUcEYUhjJb/i63rSd+uRvpzlcGOtvC/rDQcDg==" crossorigin="anonymous"></script>
<script>
let preloader = document.querySelector(".preloader");
let tl = gsap.timeline();
tl.to(".line", {
opacity: 1,
width: 200,
duration: 0.5
})
window.onload = function() {
tl.to(".loader-text", {
opacity: 0,
duration: 0.2
})
tl.to(preloader, {
opacity: 0,
onComplete: function() {
preloader.style.display = "none";
}
})
};
</script>
<style>
p {
margin-bottom: 15px;
}
</style>
<div class="preloader fixed inset-0 bg-gray-200 z-50 flex items-center justify-center" style="pointer-events: none;">
<div class="loader-text">
Loading...
<div class="line w-0 h-2 bg-green-600"></div>
</div>
</div>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a target="_blank" href="https://google.com">link</a>
</p>
<img class="" src="https://source.unsplash.com/random/1000x500" alt="Random Image">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class="lazyload" data-src="https://source.unsplash.com/random/1000x500" alt="Random Image">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class="lazyload" data-src="https://source.unsplash.com/random/1000x500" alt="Random Image">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js"
integrity="sha512-JrL1wXR0TeToerkl6TPDUa9132S3PB1UeNpZRHmCe6TxS43PFJUcEYUhjJb/i63rSd+uRvpzlcGOtvC/rDQcDg=="
crossorigin="anonymous"></script>
<script>
let preloader = document.querySelector(".preloader");
let tl = gsap.timeline();
tl.to(".line", {opacity: 1, width: 200, duration: 0.5})
window.onload = function() {
tl.to(".loader-text", {opacity: 0, duration: 0.2})
tl.to(preloader, {
opacity: 0, onComplete: function() {
preloader.style.display = "none";
}
})
};
</script>
/* No context defined. */