Display Loading Image While Page Loads.

A website is a combination of various graphics, slider, CSS,JavaScript, HTML, Jquery files etc. But in most of the site we see they don't see any loading animation or percentage of loading time. In case of some heavily graphics especially photography website while loading a page it takes longer time. looking little frustrating. Because after visiting few pages visitors will go away due to delay loading time For this reason your site page view will reduce. This thing got me thinking.


Why don't we use a page loading animation which will give our readers a break with beautiful animation? What do you think about displaying a page loading gif image while the page loads gracefully in site's page background?

Generating a Loading Animation

We can accomplish this task by simple effort. First of all we have to create or find a beautiful loading gif image.  If you are expert in graphics designing then you can easily create a page loading gif which will be unique. However you don’t have too much talented or have knowledge about creating animated image. Because now a day there are many website available over the net where we can easily generate a loading animated image and customize it according to your Blogger template color. You can visit below sites and generate your desire one.
There are more site’s available over the net but I found these 6 is good and easy to use. So generate any loading animation by visiting those sites.  However you can use any loading image from below whatever you like

Please save any animated image and upload it in any image hosting site or in Blogger. After that use it in your Blogger template.

Adding Loading Image in Your Blogger Template

I hope you have generated any suitable loading image or selected from above. And now I will show you how to integrate this gif animated image in Blogger template. Just go through the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3 Now Find the]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy and Paste the below code above]]></b:skin>


.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('Image URL HERE') 50% 50% no-repeat rgb(249,249,249);
}

Customization

  • Replace Image URL HERE with gif image URL.
Step 5 Now again locates opening body from your Blogger template. The code will be like <body> or <body ..>

Step 6 Add the below div right below the opening <body> tag.

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

Step 7 Locate </head> By Pressing Ctrl+F (Windows) or CMD+F (Mac)  and copy the below JavaScript and paste it above/before </head>.
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

Note that <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> is optional. If your Blogger template containing this Jquery file then you don’t have to use it again.

Step 8 Finally exit from there by clicking on Save template 

Well done you did it. Now visit your Blog and see the animated effect. This loading animation will be visible while visit any Blog post and on Blog landing page.
Labels: ,

Post a Comment

[blogger][facebook][disqus]
Swicther!
Layout
Boxed Full
Boxed Background Image
Main Color
#007ABE

Shawon Khan

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjkSsWvmjIpQ_ICXr5bGfT4RPhd5Vrxek-oaojrkvS3JiGv9vw6CubrWWVDfcVeVheD61_MlnQHrsEfAVH3JVIc_0zb-RwuasrPCJQBYPOaDaZ7LVdKorVE2kIhrh8sl-9a_s-R7ReQzX/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.