How To Add loading Gif in Blogger Until Blog Fully Loads JQuery

Hello Everyone Today we are back with Amazing Trick Which is Show Logo + loading icon in blogger until blog fully load which works on pure HTML, CSS And Jquery. Many Big Sites Display Logo + loading icon until page loads completely. Now a Days All Blogs and Sites are using Images and JavaScript more and more which leads to slower load. When Visitors visit the page which is not completed loaded and images does not load and some JavaScript widgets are still loading then The page will look messy and the visitors within seconds close the site and does not come back again. So it is important for large blogs to show loading icon while the page loads so the visitors might know the page is loading.

What loading icon in blogger while page loads meant?

This is a GIF icon displayed on your blog while the page loads. and as soon as the page loaded completely the icon and the logo will fade out. and your loaded website will be displayed to your visitors. So That The users know your website is getting things ready and as soon as the site loads The visitors can use it. 

Why To Show Logo + loading icon in blogger?

Showing Logo + loading icon in blogger Has Many Features like:

• The Blogger Blog Looks Official and most advanced.
• This Reduces the Bounce rate and increases the pageviews of your page or site.
• Branding is Good that's why we are showing logo with the GIF image.
• it is responsive can display easily on any device and lightweight too.

To See The Working DEMO Click on Trending Widgets:

Let Start! How To Add  Show Logo + loading icon in blogger until blog fully load jquery:

Steps To Add Animated Show Logo + loading icon in blogger:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list 

and Open it as highlighted in the image above.

STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<style>

/* Designed By Trendingwidgets.com */

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN2kXGxi315QTOCi-os9Yn6pwOwQZQZrUIn2juCt1IAgpYqzII7zGBWlVnBkQMYv60Uq86csWcXgcIw9zaedabIGu_rfp9YfEJbaZfGXcLB-JTNXAup0FvXGfx42E9-nB3IkzQuyzpuGs/s1600/Site+Loading.gif') 50% 50% no-repeat rgb(249,249,249);
}

.logoLoader {
 z-index: 9999;
 background: rgb(249,249,249);
display: block;
margin: 200px auto!important;
text-align: center;
width: 100%;
height: auto;
}

.logoLoader span {
  font-size:300%;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  position: relative;
  font-family: 'Bree Serif', serif;
  top: -15px;
  }
</style>

<div class="loader">

<div class="logoLoader"><img class="loaderImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJ3lWeeYAd_O8UCntNxEAnyDppap0Rdz-zGIy92YQuGOZmcRfm1s4xwKIq22ggDWXzvijfsux0CKfkg-V8IzrCfoL99NC0NuzCG0Igdkw4u9HbShYq_83XvOMeJSoL6WibZeDTT-4mYk/s1600/Trending-WidgetsNew+-Logo.png"/><span>Loading... Please Wait</span>

</div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(window).load(function() {
    $(".loader,.logoLoader").fadeOut("slow");
});
</script>

Customization:

First CSS Part:

• The Yellow Highlighted Text is Responsible For the loading GIF Icon. If you want to change the default Loading Icon with your Own GIF Icon then Replace the URL of the image in yellow color with your GIF URL.

Second HTML Part:

• The Green Highlighted Text is Responsible For Logo Of your Site or Blog Replace Default Logo URL in Green Color With your Logo URL. And Add Logo With 250px width.

• The Light-blue Highlighted Text is Responsible For The Text To Appear Beside Your Logo. Like The default text is "Loading Please Wait". If you want to change this and want to add your own text then change the text in Blue Color With your own text.

Third JavaScript Part:

• The Orange Highlighted Text is Responsible For Jquery Script So If you already added Jquery in your template then delete the text in orange color. ( This is Optional ).

STEP 6:  All Done Save the Gadget and Check it in your site.

That's It Thanks For Following our Tutorial " Show Logo + loading icon in blogger until blog fully load jquery! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.