Show Loading Image while Page is Loading with jQuery

Isn’t it a cool Idea to Show Loading text/image until the page fully loaded and the one of the good example is Gmail itself.

In this Article I will show you How you can Show Loading image while Page is Loading.

Below are some cool Loading images:

Preloader-6Preloader-4Preloader-3Preloader-2Preloader-1Preloader_10Preloader_9Preloader_8Preloader_7Preloader_6Preloader_5Preloader_4Preloader_3Preloader_2Preloader_1

You Can Download the Preloaders from Pixel Buddha or Codrops or you can Generate your own from preloaders.net

Code to Display the Preloader

HTML Code

Add the below code just after <body> tag.

<div class="preloader">
   <div><img src="http://mycodingtricks.com/wp-content/uploads/2015/05/Preloader_1.gif"/></div>
</div>

CSS Code

Now, Stylise the Preloaded with Some CSS. Below CSS Code will Cover the Page with white background and bring the loading image in middle of the page.

.preloader{
  background:rgba(255,255,255,0.9);
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:9998;
  opacity:1;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.preloader img{
  position:fixed;
  z-index:9999;
  top:40%;
  left:45%;
}

jQuery/JavaScript Code

Now add the jQuery Code to Hide the Preloader when the Page will be Completely Loaded.

[moptin id="3100"]
$(window).load(function(){
  $(".preloader").fadeOut("slow");
});

You can also use JavaScript to hide the preloader.

window.onload = function(){
  var preloader = document.querySelector(".preloader");
  preloader.style.opacity = 0;
  setTimeout(function(){
   preloader.style.display = "none";
  },1000);
}

Now Here is the Full Code of How your Page will look like:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Page Title - My Coding Tricks</title>

<style>
.preloader{
  background:rgba(255,255,255,0.9);
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:9998;
  opacity:1;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.preloader img{
  position:fixed;
  z-index:9999;
  top:40%;
  left:45%;
}
</style>

</head>
<body>

<div class="preloader">
   <div><img src="http://mycodingtricks.com/wp-content/uploads/2015/05/Preloader_1.gif"/></div>
</div>

<!--Your Further Body Content Goes Here-->

<!-- Your Body Content End Here-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

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

</body>
</html>

All Done.Now, When your page will be loading, a loading icon will be displayed and when the page is completely loaded, the loading image will hide.

Please Don’t forget to share this Article.

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

2 Responses

  1. Axel says:

    Can you build a plugin for WordPress please? 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *