'Is there a way to having loading animation show until the page is fully loaded?

I have deployed my website on netlify but, the website displays only HTML until it finishes loading... Any tips on a way to make the website only show once it has been fully loaded?

I have made my own loading animation but I don't know how to go on about doing this.

javascripthtmlcss


Solution 1:[1]

Use Window: load event.

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

Check the below example for reference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #loader {
      height: 100vh;
      width: 100%;
      background-color: black;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    #loader img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30%;
    }
    </style>

    <title>The Loader</title>
  </head>
  <body>
    <!-- Div for loader placement -->
    <div id="loader">
      <img src="loader.gif" />
    </div>

      <div>
        <span>We'll answer you soon!</span>
      </div>
    </section>

<script>

  //hide the loader after page is loaded fully
  var loader = document.getElementById("loader");
  window.addEventListener("load", function () {
    loader.style.height = "100%";
    loader.style.width = "100%";

    loader.style.borderRadius = "50%";
    loader.style.visibility = "hidden";
  });

</script>
  </body>
</html>

Solution 2:[2]

So I wrote this a few hours ago and then the servers went down

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <style>
    .main {
      visibility: hidden
    }
  </style>
  <script>
    window.addEventListener("load", function() {
      document.getElementById("animation").style.display = "none";
      document.getElementById("main").style.visibility = "visible";

    })
  </script>
</head>

<body>
  <div id="animation">img src="animated.gif" /></div>
  <div id="main">
    Rest of the site
  </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TBA
Solution 2 mplungjan

Related Questions