Displaying loading spinner whilst page is loading

  • Post author:
  • Post category:PMF
  • Post comments:0 Comments

I got this code from somewhere on the internet but can’t find a reference for it. If you created the code I’ll be happy to add a link. Thank you

    /* This function makes sure nothing is displayed until the whole page is loaded */
    document.onreadystatechange = function() {
/*JS code */     
 if (document.readyState !== "complete") {
        document.querySelector("body").style.visibility = "hidden";
          document.querySelector("#loader").style.visibility = "visible";
          } else {
            document.querySelector("#loader").style.display = "none";
              document.querySelector("body").style.visibility = "visible";
            }
          };
/* CSS code*/
/* page loading spinner */
#loader {
  border: 12px solid #f3f3f3;
  border-radius: 50%;
  border-top: 12px solid #444444;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/*html*/
... code above
<body>
  <div id="loader" class="center"></div>

.. website code
</body>


Leave a Reply