How to show the Loader until the full web page load

You can see the please wait or loader image on many of the web pages and web application this one used for use should wait until the full page code load on the browser.

Using this to engage the view until the full webpage will load. If a user comes to your website it will take a small amount of time to load the webpage due to font, Image, Css, JS files, etc.

That time you can show any attractive loader image are animation on the screen to engage the user. Because the survey report says if the webpage takes more than three seconds to load a page on the web browser the viewer will close the browser tab and move on to another thing. Over come this problem we used the kind loader on webpage.

Here i will share small css and js code to show the loader on the screen and automatically hide the loader after the full page loaded on the screen.

CSS:

p {
    font-size: 18px;
    width: 70%;
    margin:5% 15%;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 9999;
    background-color: #000000;
    color: #ffffff;
    opacity: .8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader span {
    font-size: 38px;
}

HTML:

<div class="loader"><span>Loading...</span></div>
<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.......</p>
</div>

Javascript

window.onload = (event) => {
	document.querySelector('.loader').style.display = "none";
};