Animated Page Loading Effect for Blogger

Dhiraj Barnwal Thursday, 15 August 2013 61 comments
Loading Effect Blogger
Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your blog.

The concept of this widget is simple. This is more or less like Exit Effect we add in Microsoft Powerpoint's Custom Animation. Just like that whenever the visitors will click any link to leave the current page, inspite of the old boring loading it will have animation.



A live demo can be seen on my blog itself. Just click any link here and you could see the change.

To add this effect to your blog do the following things.

Adding the HTML and Script

Add the below given code just above </body>.
<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

After adding this code, save the template.

You are done now. Now you and your visitors can see this awesome and cool Animated Page Loading Effect in you blogger blog.
Labels:
Google+ Pinterest

61 Comments to Animated Page Loading Effect for Blogger Post Yours! Read Comment Policy ▼

not workin!!!!!!!!!!

May I have your blog URL please.

Awesome, Thanks for sharing Dhiraj :)

Your welcome Rohit ! Keep Visiting ABT


nice information.It is helpful.I appreciated your effort.I would like to see more posts like this.thanks

May I please have your blog URL with the code added so that I can checkout the problem.

There was a issue with some of the blogs. The code is now updated and works for all :D

There was a issue with some of the blogs. The code is now updated and works for all :D

hello, is there any way to open blogger popular posts thumbnails in same window ?

By default it opens in the same tab / same window.

Thanks for such a nice article.I think animated page loading effect make our blog more interseting.Thanks foe sharing with us

in my blog also it is not working , this is the first time that your widget is not working on my blog : my blog url : http://tkpsoftwares.blogspot.in/

Its because jquery plugin is missing add it. :)

Not working bro.. plzz help..

Very nice plugin mate. Keep sharing

please can you also add the page navigiation (like your page navigation) widget and subscribe to our news letter(like your subscription at ) top widgets.so kindly also add these posts

It is not working on my blog -Freehacktricks3.blogspot.com

Plz help

It's Working Dude .

Visit My Blog : http://tkpsoftwares.blogspot.in/

Not Working Plz Help Me !!!!
URL-http://techdrj.blogspot.in

@All Make sure you have the Jquery Plugin there in your blog.

Thankx Man It's Working !!!
Just installed Jquery Library.It's Working now.

worked for few dayz now not working :( :( :( plzz help Dhiraj


www.123LoveBook.com

Its Not In Center, Check Pls

http://extra666.blogspot.com/

Nice information.It is helpful.I appreciated your effort.I would like to see more posts like this.thanks

THANK YOU!!!!! IT WORKED. YOU'RE AWESOME.

Not working in my www.technocrysis.com blog but working in my other blog... Pls help Dhiraj

Jquery Plugin must be missing check other comments for help.

sir..mine also not working..i already installed SEO Friendly before.

Jquery Plugin must be missing check other comments for help.

mine also not working..can you be specific where i can solve the Jquery plugin. tq

thanks for your tutorial..(y) it works in my blog.

ifulifu.blogspot.com

Hey Dhiraj
It`s not working on my blog....
Blog URL: www.10magictricks.blogspot.com

It's Not Working! I already installed jquery Url - http://www.androidsbestgames.com/

sometimes this loading effect is not working on my blog

THANKS MAN. NICE WRIGHT UP

I downloaded JQuery but it still doesn't work. Can u please help?
ryuichis.blogspot.com

Sorry but I didn't find the relevant code in your blog.

I removed it since it didn't work,
but I found another tut from youtube and cuz of it, it works! :)
Thanks for sharing these wonderful features! :)

Please Make This As Page Loading Effect - http://jsfiddle.net/pC22x/

WORKING PERFECT BRO NICE POST VERY USEFUL CHECKOUT-MY WEBSITE.
http://www.atozinfo4all.in

I wanted my Navigation bar to appear during Loading..
Can u help me out of this ??

Regards,
Mohammed Sohail Amer

www.techikot.blogspot.com

Hello Admin This Code Not Working On My Blog,
Please Help Me And Solve This Problem...

http://www.mobiletrick.in

it works perfect on my blog but how can i hide the scrollbar while this effect is running? Thanks

Wow it works and is very cool!
Thank you very much, http://www.idealgamer.com

sir how to add jquery in blogger ???

its not working on my blog (lizzyportal.blogspot.com

not workin in my blog.. blog address - satheeshmphotography.blogspot.in

hey its not working on my blog too can you help me??
blog url: http://theartictern.blogspot.com.ng/

Where is the body Option plz give ss of it Thanks sir

Thanks its working bro :)

Not working on my blog page.. can you have a look??
www.kaashvii.com