Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    Create two Promises where one waits for a timeout that triggers after 5 seconds and where the other listens to the load event.

    Use Promise.all() to act on when all of the promises have resolved.

    const dotlottiePlayer = document.getElementById("myDotlottiePlayer");

const fiveSecondWait = new Promise(resolve => {
  setTimeout(resolve, 5000);
});

const pageLoaded = new Promise(resolve => {
  window.addEventListener('load', resolve);
});

Promise.all([fiveSecondWait, pageLoaded]).then(() => {
  dotlottiePlayer.style.display = "none";
});
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search