Add 17 Exceptional Styles jQuery Preloading Animation Effect on Your Blog

How to display loading graphic until blogger page fully loaded? Learn tricks about adding Gif animated image while Blog page loads by using Jquery.

We've always tried different tricks, templates, and gadgets to make your blogs look more appealing and professional than others. For blogger sites, we will add an animated page loading animation. When a visitor visits your blog, an animated loading icon appears, and the visitor will see an automatically fully-loaded page.

For a good website first priority, we should optimize our template’s images, minifying style sheets and scripts. But this is required significant changes on your Blogger template. But most of us don’t want to sacrifice our template’s design and style. 

So I think probably you are now thinking about any alternative solution? Right!!

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 the site’s page background?


17 Unique Loading Effect Styles! Add to Blogger

What is Preloader In Blogger?

The Preloading Effect on Blogger is comprised of transitions that appear automatically when a page on the blog is loaded and then vanish once your webpage is completely loaded. This widget is a combination of very light pure CSS and JavaScript and a small gif image. For this reason, it loads super fast. Moreover, this preloading animation would not directly impact your blog speed.

Why Use Page loading Animation in Blogger?

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 use any loading animation or percentage of loading time. 

In the case of some heavy graphics especially photography website while loading a page it takes a longer time. 

It’s looking a little frustrating. Because after visiting a few pages visitors will go away due to delay loading time. For this reason, your site’s page view will reduce. This thing got me thinking.

Where to Get Loading Animation Images?

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 an expert in graphics designing then you can easily create a page loading gif that will be unique. 

However, you don’t have too much talented or have knowledge about creating an animated image. Because now day there are many websites available over the net where we can easily generate a loading animated image and customize it according to your Blogger template colour. You can visit the below sites and generate your desire one.

  • http://preloaders.net/
  • http://loading.io/
  • http://www.chimply.com/Generator#classic-spinner,animatedCircle
  • www.ajaxload.info
  • http://www.loadinfo.net/
  • http://cssload.net/

There are more site’s available over the net but I found these 6 is good and easy to use. To generate any loading animation by visiting those sites.  

Add 17 Exceptional Styles Preloading Animation Image

I have collected 17 stylish loading animation gif image for using in your blogger theme. You can use any loading image from below whatever you like



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

Recommended: Blogger Beginners: How to Host Image By using Blogger Static Page?

How to add Loading Image While Page Loads in Blogger Theme?

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 the 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 Theme from the left vertical menu and after that click 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);
}

You need to customize by replacing the Image URL HERE with gif image URL.

Step 5: Now again locates the 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 including the Jquery library 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 the Save theme button.                     

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 the blog landing page. By using our trick you can use unlimited loading animation. Just you will need gif images.


Have you got any Good loading gif image? You can share with us in the comment section. Thank you. Happy Blogging.

Go Up