21 Unique Loading Effect Styles! Add to Blogger

How To Add Unique Loading Effect On Blogger?

We always want to look our blogs more attractive and more professional from others so we always used different methods, templates, gadgets etc. Today we are introducing animated page loading effect for blogger blogs. When our visitors click any link on our blog then an animated loading screen will show and automatically carry the visitor to the clicked link. This is a great way to impress our visitors and attract them to visit our blog pages more times.

How To Add Loading Effect To Blogspot?

If you have seen Google Dynamics View Theme for Blogger, then you might be aware of the fact that before the whole template gets exposed a Small Jquery loading ICON appears that literally stoles our all attention. For Example, you are thinking to play a PC game so before you could start playing you have to go through LOADING part. Similarly, we will insert a tremendous Jquery Loading Effect to our BlogSpot Blog so our visitors won’t see the images or content getting load instead we will show them a cute Jquery loading page that would literally amuse them.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

There are many way to create loading effect ,in this post ,we want to introduce the easiest way, here are some ideas and inspiration of loading effects that you can apply on your web design. Lets try how to install these effects to your blogger blog.

Note: Before doing Any Customization in your Blogger Template, must download a backup copy of your template.

How To Add Loading Effect On Blogger?

  • Go To Blogger >> Template >> Edit HTML.
  • Now Search for </head> tag by pressing CTRL+F OR CMD+F.
  • Copy the code below and paste it just above of </head> tag.

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js’ type=’text/javascript’/>

Note: If Jquery is Already added in your Template then skip above step. Because if jQuery is more than one would slow down loading speed.

  • Now, Again Search for ]]></b:skin> tag and paste below lines just above of it.

     #page-loader {
    position:fixed !important;
    background:#FFFFFF url(‘URL Here‘) no-repeat 50% 50%;

    padding:1em 1.2em;

Note: Before Adding the JavaScript Code inside your blogger template, First change Above URL Here with one of Image URL from below. Add those link which you want to add.

Blogger Loading Effect Style1]

Blogger Loading Effect Style1


Blogger Loading Effect Style2]

Blogger Loading Effect Style2


Blogger Loading Effect Style3]

Blogger Loading Effect Style3


Blogger Loading Effect Style4]

Blogger Loading Effect Style4


Blogger Loading Effect Style5]

Blogger Loading Effect Style5


Blogger Loading Effect Style6]

Blogger Loading Effect Style6


Blogger Loading Effect Style7]

Blogger Loading Effect Style7


Blogger Loading Effect Style8]

Blogger Loading Effect Style8


Blogger Loading Effect Style9]

Blogger Animated Loading Effect Style9


Blogger Loading Effect Style10]

Blogger Animated Loading Effect Style10


Blogger Loading Effect Style11]

Blogger Animated Loading Effect Style11


Blogger Loading Effect Style12]

Blogger Animated Loading Effect Style12


Blogger Loading Effect Style13]

Blogger Animated Loading Effect Style13


Blogger Loading Effect Style14]

Blogger Animated Loading Effect Style14


Blogger Loading Effect Style15]

Blogger Animated Loading Effect Style15


Blogger Loading Effect Style16]

Blogger Animated Loading Effect Style16


Blogger Loading Effect Style17]

Blogger Animated Loading Effect Style17


Blogger Loading Effect Style18]

Blogger Animated Loading Effect Style18


Blogger Loading Effect Style19]

Blogger Animated Loading Effect Style19


Blogger Loading Effect Style20]

Blogger Animated Loading Effect Style20


Blogger Loading Effect Style21]

Blogger Animated Loading Effect Style21


  • Now, Again search for </body> tag and paste below jQuery code above of </body>  tag.

     <script type=’text/javascript’>
    $(document.body).append(‘<div id=”page-loader”></div>’);
    $(window).on(“beforeunload”, function() {

  • Thta’s it. You are done.
  • Now open your Blog and see it live on your Blogger Blog.


So above guide is about How To Add Loading Effect to Blogger Blog? Hope you easily add it on your blogger by above complete guide. If anyhow problem persist after following all above steps then drop a comment below or contact me via contact page. If you like this post then you can follow us on Facebook or Subscribe us. It is just Reminder. πŸ™‚ Thank You! Stay Blessed! πŸ™‚
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging for 2 years, and here on My Blogger Guides, I'm sharing my what I learned in these past two years. :)

Click Here to Leave a Comment Below 1 comments
John Okosun - July 6, 2017

Nice post. Was looking for something like this and I found it here.

Thanks… I appreciate your effort.


Leave a Reply: