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 22:48

genial :D

Reply
Anonymous Author
19 August 2013 at 09:37

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

Reply
19 August 2013 at 17:41

May I have your blog URL please.

Reply
Rohit Asare Author
20 August 2013 at 23:25

Awesome, Thanks for sharing Dhiraj :)

Reply
21 August 2013 at 11:34

Your welcome Rohit ! Keep Visiting ABT

Reply
21 August 2013 at 21:50

It's not Working!

Reply
22 August 2013 at 14:13


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

Reply
22 August 2013 at 14:19

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

Reply
22 August 2013 at 14:23

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

Reply
22 August 2013 at 14:24

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

Reply
30 August 2013 at 11:36

its working

Reply
yo Author
31 August 2013 at 03:19

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

Reply
31 August 2013 at 19:18

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

Reply
Ghost Rider Author
5 September 2013 at 21:40

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 19:12

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 22:32

Its because jquery plugin is missing add it. :)

Reply
VolT Author
10 September 2013 at 16:26

Not working bro.. plzz help..

Reply
pankaj Jangir Author
22 September 2013 at 20:45

Very nice plugin mate. Keep sharing

Reply
SANTOSH KUMAR Author
27 September 2013 at 20:20

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
2 October 2013 at 11:12

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

Plz help

Reply
TP Softwares Author
7 October 2013 at 19:51

It's Working Dude .

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

Reply
10 October 2013 at 11:30

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

Reply
10 October 2013 at 14:34

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

Reply
10 October 2013 at 19:16

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

Reply
10 October 2013 at 21:55

This script is not working

Reply
Rajesh Kuchan Author
17 October 2013 at 13:47

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


www.123LoveBook.com

Reply
Hamza Khan Author
20 October 2013 at 21:43

Its Not In Center, Check Pls

http://extra666.blogspot.com/

Reply
Video scribe Author
23 October 2013 at 11:24

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 14:37

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

Reply
Kiki Dee Author
30 October 2013 at 22:53

wow cool, it worked !

Reply
Techno Crysis Author
2 November 2013 at 19:42

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

Reply
3 November 2013 at 13:36

Jquery Plugin must be missing check other comments for help.

Reply
seodragon Author
5 November 2013 at 11:24

hey he is work it tnkyou

Reply
Anonymous ® Author
6 November 2013 at 07:34

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

Reply
6 November 2013 at 17:45

Jquery Plugin must be missing check other comments for help.

Reply
Chinta Author
6 November 2013 at 22:37

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

Reply
12 November 2013 at 10:48

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

ifulifu.blogspot.com

Reply
1 December 2013 at 14:41

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

Reply
Namit Author
7 December 2013 at 21:29

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

Reply
Harish Dhiman Author
15 December 2013 at 12:13

sometimes this loading effect is not working on my blog

Reply
BRIM HOME Author
29 December 2013 at 15:35

THANKS MAN. NICE WRIGHT UP

Reply
Miki Ryuichi Author
3 January 2014 at 03:17

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

Reply
3 January 2014 at 10:32

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

Reply
Miki Ryuichi Author
7 January 2014 at 03:53

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 17:27

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

Reply
11 March 2014 at 19:30

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

Reply
25 March 2014 at 22:10

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 13:31

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 17:23

It worked fine thanx

Reply
25 June 2014 at 19:25

it works for me thanks

Reply
aarti garchar Author
13 July 2014 at 10:00

not working :(

Reply
Techy Angel Author
14 September 2014 at 17:40

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 14:36

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

Reply
Ujjwal Kumar Author
16 March 2015 at 16:02

sir how to add jquery in blogger ???

Reply
Abhinav Singh Author
31 May 2015 at 09:51

thanks a lot
it worked

Reply
isaac Author
21 August 2015 at 22:34

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

Reply
26 October 2015 at 11:53

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

Reply
7 November 2015 at 01:23

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 21:26

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

Reply
kuna patra Author
27 April 2016 at 13:36

Thanks its working bro :)

Reply
20 August 2016 at 11:32

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 |