How to add Loading Image While Page Loads?

Learn tricks about adding Gif animated image while Blog page loads. This widget tutorial will enable you to use any gif animation as loading animation. You can use this feature to improve your Blogger template loading experience.

loading animation

A website is a combination of various graphics, slider, CSS, JavaScript, HTML, Jquery files etc. But in most of the site we see they don’t use any loading animation or percentage of loading time. In case of some heavily graphics especially photography website while loading a page it takes longer time. It’s looking little frustrating. Because after visiting few pages visitors will go away due to delay loading time.  For this reason your site’s page view will reduce. This thing got me thinking.

For a good website first priority we should optimize our template’s images, minifying style sheets and scripts. But this is required significant changes on your Blogger template. But most of us don’t want to sacrifice our template’s design and style. So I think probably you are now thinking about any alternative solution? Right!!

Why don’t we use a page loading animation which will give our readers a break with beautiful animation?  What do you think about displaying a page loading gif image while the page loads gracefully in site’s page background?

Generating a Loading Animation

We can accomplish this task by simple effort. First of all we have to create or find a beautiful loading gif image.  If you are expert in graphics designing then you can easily create a page loading gif which will be unique. However you don’t have too much talented or have knowledge about creating animated image. Because now a day there are many website available over the net where we can easily generate a loading animated image and customize it according to your Blogger template color. You can visit below sites and generate your desire one.
There are more site’s available over the net but I found these 6 is good and easy to use. So generate any loading animation by visiting those sites.  However you can use any loading image from below whatever you like

Please save any animated image and upload it in any image hosting site or in Blogger. After that use it in your Blogger template.

Recommended: Blogger Beginners: How to Host Image By using Blogger Static Page?

Adding Loading Image in Your Blogger Template

I hope you have generated any suitable loading image or selected from above. And now I will show you how to integrate this gif animated image in Blogger template. Just go through the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3 Now Find the]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy and Paste the below code above]]></b:skin>

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('Image URL HERE') 50% 50% no-repeat rgb(249,249,249);


  • Replace Image URL HERE with gif image URL.
Step 5 Now again locates opening body from your Blogger template. The code will be like <body> or <body ..>

Step 6 Add the below div right below the opening <body> tag.

<div class="loader"></div>

Step 7 Locate </head> By Pressing Ctrl+F (Windows) or CMD+F (Mac)  and copy the below JavaScript and paste it above/before </head>.
<script src="//"></script>
<script type="text/javascript">
$(window).load(function() {

Note that <script src="//"></script> is optional. If your Blogger template containing this Jquery file then you don’t have to use it again.

Step 8 Finally exit from there by clicking on Save template button.                     

Well done you did it. Now visit your Blog and see the animated effect. This loading animation will be visible while visit any Blog post and on Blog landing page.

Have you got any Good loading gif image? You can share with us in Comment section. Thank you. Happy Blogging. 
How to add Loading Image While Page Loads?
4 Stars stars - "How to add Loading Image While Page Loads?" A website is a combination of various graphics, slider, CSS, JavaScript, HTML, Jquery files et...

Post a Comment

ভাই, এনিমেশন এর নিচে কি কোন লেখা দেওয়া যাবে? যেমন Loading, Please wait..., এরকম?

Na. ata gif image use korar jonno create kora hoice. But apni referral site gola visit korte paren. ooikhane animated text generate korte parben. je kono lekha lekhte parben.. Tarpor image hisabe download kore. Apnar site a upload koren. R widget a use koren. That's it. ;)

Hey,Fazle How are you doing mate? i'm a big fan of your site..i just want to know how you made this excerpt "Learn tricks about adding Gif animated image while Blog page loads. This widget tutorial will enable you to use any gif animation as loading animation. You can use this feature to improve your Blogger template loading experience."
which is showing above the first image .
Will be very thankful if you will share with us.

Hi Anuj.. this is a simple trick I have applied. I think you use search description while create new post in Blogger. And i just make that search description visible inside post. that's it. Whatever you write on Blog Post search description it will be visible below post title. I hope I will share a tutorial soon. Keep visiting.Thank you. ;)

Thanks a ton..But its possible you to share this trick today ? i'm waiting from so many days so finally today i asked you for that trick..hope you will not disappoint us.And if not possible to share today you can mail me.

Hello again Anuj.. Actually I don't write a content without pre planning. First I made a schedule and make a list of topic. after that I write and publish time to time. I am currently writing and developing some new topics and widget. Also designing a new Template. When I get time I will publish it soon. But don't worry hopefully within 3 or 4 days.

I ways try to share everything what I have learned. Even "How to add Loading Image While Page Loads?" article was inspired me after receiving request from some readers of my Blog. So please be patient. :>

ভাই, আমিতো আপনার ব্লগার স্পাইসের টেমপ্লেট ইউজ করি, আমার টাতে তো আগের একটা লোডিং ইমেজ সেট করা আছে, এখন সেটা চেঞ্জ করার জন্য কি করবো?

Apni Image URL ta change kore den r kico korte hobe na.. Template Edit kore nicer moto code search koron tarpor sodho image URL ta change kore den.E.g IMAGE URL HERE aaita replace koren. Taholei kaj hobe.

.loadingpost,.loadmorepost{background:#fff url(IMAGE URL HERE) center center no-repeat; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: +1000000000000;opacity: .9; display: none;}


how can add loading .... text
or web site loge

This tutorial is for loading image. You can use your Blog Logo also. just find the code like below in above.

background: url('Image URL HERE') 50% 50% no-repeat rgb(249,249,249);

Now replace the Image URL HERE with your Logo URL. It will work now.

thank your support
please how can add with loading gif and blog logo
please find below this not gif

To do this you have to use any GIF animator software. Search in search engine and create GIF. However you can create GIF image by using PhotoShop software, but it requires Photo editing knowledge. You can take help from any graphics designer. :t

Thanks for share

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *