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>