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.
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>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>