How to add preloader to website?? Please tell

Question

I want to add preloaded to my website
..Please help

Answer 1

First nake a div and a loader in that, any text is enough inside the div like:
<div>loading...</div>

Then add a class to it, any name you like(remember the name)
<div class="loader">loading...</div>

Then in css:
.loader {
position: fixed;
top: 0;
z-index: 100;
background: white;
width: 100vw;
height: 100vh;
}
This will make it appear big on the screen

Then using js wait for the document to load then fetch the div and make it opacity to 0 . Like:
onload = function () {
var loader = document.getElementsByClassName("loader")[0]
loader.style.opacity = 0;
}

here is an example code
https://code.sololearn.com/WKJwFLl7K2jO/?ref=app

Answer 2

Thank you so much