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

How to download and apply a web font in CSS

Hi, In this tutorial, I am going to teach you how to download and apply a web font in CSS.

Generally, web fonts allow the designers to use the font without installation on the user's computer. We have to use our own fonts by using the @font-face rule

This @font-face rule is supported by the all major browsers, Chrome, Internet Explorer, Mozilla, Safari, Opera
There are 4 different web font formats available
1. TrueType Fonts (TTF)
2. OpenType Fonts (OTF)
3. The Web Open Font Format (WOFF)
4. Embedded OpenType Fonts (EOT)
Here TTF, OTF, WOFF are supported to the all major browsers. Remaining web font formats are not supportable for all browsers.

How to Download a web font
If you want to download a web font use the font squirrel website font squirrel. Here search your desired web font ex: Open Sans

Now will find the no.of fonts related to Open Sans like Open Sans Light, Open Sans Light Italic, Open Sans Regular, Open Sans Italic, and so on.Now click on DOWNLOAD TTF button.It will download the all Open Sans fonts.

Now Extract the zip file and upload the fonts to the generator in the font squirrel. Then it will convert the TTF fonts to WOFF. WOFF is the regular usage font format on the web. Now extract the downloaded file and see the example code.

How to Apply a web font
Now copy the all .woff, .woff2 files and stylesheet.css file to your project.
Now link the stylesheet.css to your index page in header and apply the font to the body.

<html>  
   <head>  
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />  
    <style type="text/css">  
      body{  
      font-family: 'open_sansregular';  
      }  
    </style>  
    <title>Open Sans Regular</title>  
   </head>  
   <body>  
    <h1>WelCome</h1>  
   </body>  
 </html>

Watch Demo

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