How to Add Preloader in Blogger - GIF Method

If you have a website, then you might know the importance of a Preloader. Preloader are used to create a smooth transition from one page to another and are necessary especially when there is heavy content.

You Can Add a loading animation (Preloader) with JavaScript and CSS3 or also with JS with gif.

We will discuss both methods here so you can choose one method according to your choice and also we will share some loading gifs or CSS codes with you.

What is a Preloader?

The Preloader is a type of animation that appears on the top of a web page before the main content loads. The purpose of it is to tell the visitor that your website is working on loading and also inform them about other information related to your website or product, like how long it takes for all elements to load, what are those elements, etc.

Many Famous Websites Use Preloader on their whole website or on specific pages Even, Google also uses Preloader on their different platform like Google Analytics, Google Ads, Gmail, etc.

Why Should I Use a Preloader?

Preloaders are an important part of website design and they come in a variety of shapes and sizes. They can be used effectively to improve load times, create visual interest, grab the user's attention, or even provide a distraction while loading time occurs.

You have noticed a loading screen in Every game, PUBG provides some quick tips while loading the game on the screen. so they grab the player's attention and provide a little distraction while loading time.

If your website is hosted on a FREE Server Like Blogger, or a Cheap web Hosting then you should use Preloader definitely. otherwise, you don't need Preloader for your site because many visitors want result on your page ASAP.

How to add Preloader on Blogger Website?

I Previously mentioned that we can add Preloader using any gif file or a CSS3 with JavaScript, but if you have a custom domain then you can add any progress bar or Preloader on your website without any code by HubSpot's app PACE through your Cloudflare account.

But, we will not discuss CSS3 and Cloudflare app methods here. we will cover both tutorials in upcoming articles.

You can request us for a video tutorial for this article about "Add a Preloader on Blogger Website" by using our contact page.

Add Preloader Using Gifs or APNG:

This is a common and widely used method for adding a Preloader by bloggers for their blog or website, you must need a gif or APNG image for this method, you can use any background, your logo animation, text animation, loaders, bars even any image as a Preloader.

So, first, we find out gifs, APNG images, or create our own animation gifs then we will discuss how to implement those images/loaders on our site.

These are some websites where you can find out loaders gifs and download them for your blog, also you can choose your own image or animation as a preloader:

and lots of others, even you can search Preloader on google, then you will get tons of preloaders in the image section and you can choose and use one of them.

Make Sure your Preloader image must be optimized. we recommend flevix.com for an awesome Preloader because of the quality and size. they provide SVG animation, so you should prefer flevix.

Few Preloader gifs, you can download and use on your website.

How to Create your own loading animation or Preloader?

If you are a graphic designer, then you probably don’t have trouble creating a loading animation or Preloader for your blogger/Blogspot website. But if you aren’t one, then you can create your loading animation by using many online websites like Loading.io.

Loading.io Provides many tools which may help to animate any icon, text, logo, or image. they also provide a readymade Preloader you can also choose one of them.

How to Add Animated image/loading animation in Blogger Theme?

It should be noted that this part will be a little complicated, so look carefully because if there is even a slight error then the Preloader will not work, and make sure you take a backup before changing anything.

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

Step 2. Click on Theme >> Edit HTML >> Click anywhere in the HTML Editor and press CTRL+F for Search Box which will appear on the right top side of HTML Editor.

Step 3. Now Search ]]></b:skin>

Step 4. Now, Copy the below CSS Code and Paste the just before ]]></b:skin>

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

Change Image URL with your Loading Animation URL (For image URL upload your Preloader as an image in the widget under layout section, again open that widget copy image URL and remove that widget).

Step 5. Now, Search <body> tag in HTML Section and copy and paste below code just after <body> tag.

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

Step 6. Now, Search </head> tag in HTML Section and copy and paste below code just before </head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(window).load(function() { $(".loader").fadeOut("slow"); }) </script>

Now, Save the theme.

Well done!

That's it. You have successfully added the Preloader to your blogger Website.

If You Have Any doubts and need more Preloader gifs, please comment below.

Go to Link

HOB