Display Loading Image While Page Loads using jQuery and CSS

======================HTML======================
Add the following HTML after the <body> opening tag. This loader div will show a loading image on page load.

<div class="loader"></div>

======================CSS===========================
Utilize the accompanying CSS to show a stacking picture on loader div, make stacking picture position focus of the page, and spread the whole screen with a straightforward white foundation.

<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://cdn1.iconfinder.com/data/icons/social-signature/512/Linkedin_Color-128.png') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
</style>

===========================JavaScript====================
Need to include the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Add the following line of code to hide the loading image while the page loads completely.

<script>
jQuery(window).load(function($) {
jQuery(".loader").fadeOut("slow");
});
</script>