Animated Page Loading Effect for Blogger

Posted On // 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.

61 comments

16 August 2013 at 10:18

genial :D

Reply
Anonymous Author
18 August 2013 at 21:07

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

Reply
19 August 2013 at 05:11

May I have your blog URL please.

Reply
Rohit Asare Author
20 August 2013 at 10:55

Awesome, Thanks for sharing Dhiraj :)

Reply
20 August 2013 at 23:04

Your welcome Rohit ! Keep Visiting ABT

Reply
21 August 2013 at 09:20

It's not Working!

Reply
22 August 2013 at 01:43


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

Reply
22 August 2013 at 01:49

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

Reply
22 August 2013 at 01:53

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

Reply
22 August 2013 at 01:54

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

Reply
29 August 2013 at 23:06

its working

Reply
yo Author
30 August 2013 at 14:49

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

Reply
31 August 2013 at 06:48

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

Reply
Ghost Rider Author
5 September 2013 at 09:10

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

Reply
Tushar Author
8 September 2013 at 06:42

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/

Reply
9 September 2013 at 10:02

Its because jquery plugin is missing add it. :)

Reply
VolT Author
10 September 2013 at 03:56

Not working bro.. plzz help..

Reply
pankaj Jangir Author
22 September 2013 at 08:15

Very nice plugin mate. Keep sharing

Reply
SANTOSH KUMAR Author
27 September 2013 at 07:50

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

Reply
1 October 2013 at 22:42

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

Plz help

Reply
TP Softwares Author
7 October 2013 at 07:21

It's Working Dude .

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

Reply
9 October 2013 at 23:00

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

Reply
10 October 2013 at 02:04

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

Reply
10 October 2013 at 06:46

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

Reply
10 October 2013 at 09:25

This script is not working

Reply
Rajesh Kuchan Author
17 October 2013 at 01:17

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


www.123LoveBook.com

Reply
Hamza Khan Author
20 October 2013 at 09:13

Its Not In Center, Check Pls

http://extra666.blogspot.com/

Reply
Video scribe Author
22 October 2013 at 22:54

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

Reply
Mark Williams Author
28 October 2013 at 02:07

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

Reply
Kiki Dee Author
30 October 2013 at 10:23

wow cool, it worked !

Reply
Techno Crysis Author
2 November 2013 at 07:12

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

Reply
3 November 2013 at 01:06

Jquery Plugin must be missing check other comments for help.

Reply
seodragon Author
4 November 2013 at 21:54

hey he is work it tnkyou

Reply
Anonymous ® Author
5 November 2013 at 18:04

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

Reply
6 November 2013 at 04:15

Jquery Plugin must be missing check other comments for help.

Reply
Chinta Author
6 November 2013 at 09:07

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

Reply
11 November 2013 at 21:18

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

ifulifu.blogspot.com

Reply
1 December 2013 at 01:11

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

Reply
Namit Author
7 December 2013 at 07:59

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

Reply
Harish Dhiman Author
14 December 2013 at 22:43

sometimes this loading effect is not working on my blog

Reply
BRIM HOME Author
29 December 2013 at 02:05

THANKS MAN. NICE WRIGHT UP

Reply
Miki Ryuichi Author
2 January 2014 at 13:47

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

Reply
2 January 2014 at 21:02

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

Reply
Miki Ryuichi Author
6 January 2014 at 14:23

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! :)

Reply
Rahul Author
10 February 2014 at 03:57

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

Reply
11 March 2014 at 07:00

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

Reply
25 March 2014 at 09:40

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

Regards,
Mohammed Sohail Amer

www.techikot.blogspot.com

Reply
Saurabh Author
6 April 2014 at 01:01

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

http://www.mobiletrick.in

Reply
Tech Addicts Author
3 May 2014 at 04:53

It worked fine thanx

Reply
25 June 2014 at 06:55

it works for me thanks

Reply
aarti garchar Author
12 July 2014 at 21:30

not working :(

Reply
Techy Angel Author
14 September 2014 at 05:10

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

Reply
iDeal Gamer Author
12 February 2015 at 01:06

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

Reply
Ujjwal Kumar Author
16 March 2015 at 03:32

sir how to add jquery in blogger ???

Reply
Abhinav Singh Author
30 May 2015 at 21:21

thanks a lot
it worked

Reply
isaac Author
21 August 2015 at 10:04

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

Reply
25 October 2015 at 23:23

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

Reply
6 November 2015 at 11:53

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

Reply
Syed Yasin Author
25 December 2015 at 07:56

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

Reply
kuna patra Author
27 April 2016 at 01:06

Thanks its working bro :)

Reply
19 August 2016 at 23:02

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

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Animated Page Loading Effect for Blogger |