Show loader for at least 5 seconds or until page is fully loaded

December 29, 2023

How can I display the loader for 5 seconds at least or till when the assets have been rendered completely. I have a hero image that loads slowly so I hope the loader can delay the user seeing the page until the hero image has loaded half way.

This is my index.html file

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<div id="root"></div>
<div style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      ">
  <dotlottie-player id="myDotlottiePlayer" src="https://lottie.host/2e951bf0-ee8b-42ec-aa93-681a557e55c9/6zwzi5ZAks.json" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay></dotlottie-player>
</div>

<script type="module">
  // Add a timeout to hide the dotlottie-player after 5 seconds // 
  const dotlottiePlayer = document.getElementById("myDotlottiePlayer"); 
  setTimeout(() => { dotlottiePlayer.style.display = "none"; }, 5000);
</script>

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

>Solution :

You can just use event listener to check when the page is loaded then it could fire the timeout function to hide the loader and show up your content

here is an example using addEventListener()

const docRoot = document.getElementById('root')

docRoot.style.display = 'none'
window.addEventListener('load', () => {
const dotlottiePlayer = document.getElementById("myDotlottiePlayer"); 
setTimeout(() => { 
dotlottiePlayer.style.display = "none";
docRoot.style.display = 'flex'

}, 5000);
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/src/assets/icon.webp" />
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="description" content="Crypto Data API: Integrate with Exchanges, Defi wallets and Protocols - Tensfer" />
  <meta name="'keywords" content="tensfer" />
  <title>Tensfer</title>
  <script defer data-domain="tensfer.onrender.com" src="https://plausible.io/js/script.js"></script>
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>

<body class="font-inter antialiased bg-white text-gray-900 tracking-tight">
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">show some text</div>
  <div style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      ">
    <dotlottie-player id="myDotlottiePlayer" src="https://lottie.host/2e951bf0-ee8b-42ec-aa93-681a557e55c9/6zwzi5ZAks.json" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay></dotlottie-player>
  </div>

  <script type="module">
    // Add a timeout to hide the dotlottie-player after 5 seconds 
  </script>

  <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

  <script type="module" src="/src/main.tsx"></script>
</body>

</html>