How to display Loading Image with changing some text while Page Loads using Jquery and CSS

In this tutorial, I am going to show you how can you set an animated loading image with some text changing while page loads using Jquery and CSS. It is a great idea to show a cool animated image with changing some text until your website is loading.

This idea can implement it on the user registrations. Generally, we do after the user registration in the project user should redirect to the dashboard. This is a normal way we have to do some more professional way between the registration and redirecting to the dashboard in the mean time we would show some cool animated image with changing text.

While you are using this cool idea to show the cool animated images with changing text to the user, So that user can feel much better than the previous approach.

How to convert the HTML content into an image using jquery
Step 1: Load Jquery file to you page.

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

Step 2: Create the loader class and loading id in css

<style type="text/css">  
   #loading {  
   font-size:18px;  
   text-align: center;  
   font-family: 'Open Sans', sans-serif;  
   color: RGBA(0, 0, 0, 0.9);  
   }  
   .loader{  
   margin-top: 11em;  
   }  
 </style>

Step 3: Place the loading image in the loader class.

 <div class="loader">  
   <div id="loading"></div>  
   <center><img src="images/loader6.gif"></center>  
 </div>

Step 4: Configuring the changing text in jquery.

<script type="text/javascript">  
   function onReady(callback) {  
   setTimeout( function(){  
   // Do something after 1 second  
   document.getElementById('loading').innerHTML = "Authenticating";  
   } , 1000 );  
   setTimeout( function(){  
   // Do something after 4 seconds  
   document.getElementById('loading').innerHTML = "Initializing Username";  
   } , 5000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Username Created";  
   } , 7000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Creating your dashborad";  
   } , 9000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Almost Completed";  
   } , 11000 );  
   var intervalID = window.setInterval(checkReady, 15000);  
   function checkReady() {  
   if (document.getElementsByTagName('body')[0] !== undefined) {  
   window.clearInterval(intervalID);  
   callback.call(this);  
   }  
   }  
   }  
   function show(id, value) {  
   document.getElementById(id).style.display = value ? 'block' : 'none';  
   }  
   onReady(function () {  
   show('page', true);  
   show('loading', false);  
   });  
 </script>

Step 5: Setting the redirect URL.

 <script type="text/javascript">  
   setTimeout(function () {  
   window.location.href = "http://techiesbadi.in"; //will redirect to your page  
   }, 15000);  
 </script>

Here you can download the Full Source code and check the demo.

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

Share this