Display Loading Image While Page Loads using jQuery and CSS


A web page load time depends on the page elements and it may be longer for lots of images, JavaScript, and CSS. Sometimes well-designed pages suffer for page load time. There are many ways to optimize your web pages to load faster. However, displaying a loading image on page load is a great idea to maintain the user experience of your website.

Using jQuery and CSS, you can easily display a loading icon until the page loads completely. Here we’ll provide a simple way and short code snippets to show a loading image while page loading.


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

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


Use the following CSS to display a loading image on loader div, make loading image position center of the page, and cover the entire screen with a transparent white background.

.loader {     position: fixed;     left: 0px;     top: 0px;     width: 100%;     height: 100%;     z-index: 9999;     background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);     opacity: .8; } 


At first include the jQuery library.

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

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

<script type="text/javascript"> $(window).load(function() {     $(".loader").fadeOut("slow"); }); </script> 

Also, ensure that the entire JavaScript code has been placed under the <head> tag.

Related Articles

Comments 0