To use seamlessly, give the loading wrapper a class name of "loading-wrapper" & wrap all page content inside of a div block. Give the div block a class name of "page-wrapper".
<!-- F’in sweet Webflow Hacks -->
<style>
/*The page-wrapper is initially hidden*/
.page-wrapper {
display:none;
}
</style>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js>"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// get a reference to the page wrapper
const pageWrapper = document.querySelector(".page-wrapper");
// get a reference to the loading wrapper
const loadingWrapper = document.querySelector('.loading-wrapper');
// get the 'seenAnimation' cookie and store in a seenAnimation variable
const seenAnimation = Cookies.get('seenAnimation');
// if the 'seenAnimation' cookie is undefined
if(!seenAnimation){
// display the loading-wrapper
loadingWrapper.style.display = "flex";
// show the page-wrapper
// after a set duration of 3000 milliseconds
// (the time it takes to show the loading-wrapper in this case)
setTimeout(()=>{
pageWrapper.style.display = "block";
}, 3000);
// set the 'seenAnimation' cookie
Cookies.set('seenAnimation', 1, { expires: 1 });
}
else{
// else if the 'seenAnimation' cookie exists
// the user has already seen the animation
// and so
// hide the loading-wrapper
loadingWrapper.style.visibility = "hidden";
// show the page-wrapper
pageWrapper.style.display = "block";
}
//This is for the "Clear my 24 hour cookie" button on this Hacks template
// this is not needed on your live site
// when .clear-cookie is clicked
$('.clear-cookie').click(()=>{
// remove the 'seenGif' cookie
// the animation can now play again since
//'seenAnimation' becomes undefined
Cookies.remove('seenAnimation');
});
});
</script>