How to Add a Responsive Image Preloader in Blogger

Welcome to Bytes Vibe Blogger tutorials series. Today we will learn how we can Add a Responsive Image Preloader in Blogger site. When visitors land on our blogger site, the first impression they get is very important. A responsive image preloader can enhance blogger user experience by providing a visual cue while the blogger page is loading.

A preloader is typically made with some dot or circle. But if we add our blogger site logo or icon than it will be more appealing. A custom preloader with logo or a relevant image reinforces brand identity. In this post, we’ll walk through the process of adding a simple yet effective website loader animation to Blogger site with image instead of dot.

Demo

Step-by-Step Guide to Add a Responsive Image Preloader in Blogger

Now let’s see how we can add our image logo as loading screen in site. Make sure to take backup of blogger theme. To create a beautiful Loading screen examples image preloader in blogger site follow these steps below:

How to create Responsive Image Preloader in Blogger?

Step 1: Access the Blogger HTML Editor

Log in to Blogger account. Go to the Theme section in the left menu.
Click on the Edit HTML button.

Step 2: Add CSS for the Preloader

Search for </head> tag in theme’s HTML code.
Copy and paste the following CSS code just above the </head> tag:

<style>
    /* Responsive Preloader CSS by bytesvibe.com */
    .bytesvibe {
        position: fixed;
        top: 0; 
        left: 0; 
        width: 100%;
        height: 100%;
        background-color: #fff; 
        display: flex;
        align-items: center; 
        justify-content: center; 
        z-index: 9999;
    }

    .bytesvibe img {
        max-width: 80%; 
        height: auto; 
    }

    .hide {
        display: none; 
    }
</style>
Code language: HTML, XML (xml)

Now that we have added css for Best loading animation and Stylish Preload in blogger website. We will need to add html and JavaScript.

Step 3: Add the Preloader HTML

Search for <body> tag in blogger theme HTML codes.
Insert the following HTML code just after the <body> tag:

<div class="bytesvibe">
    <img src="https://www.bytesvibe.com/wp-content/uploads/2024/08/2-2.png" alt="Loading Image"></img>
</div>Code language: HTML, XML (xml)

Here change the image link with your own image or logo link.

Step 4: Add the JavaScript

Scroll down to the end of the HTML code or search for </body>. Just above the </body> tag we need to add the following JavaScript code:

<script>
    const bytesvibe = document.querySelector(".bytesvibe");

    const hideBytesvibe = () => {
        if (bytesvibe) { 
            bytesvibe.classList.add("hide");
        }
    }

    // Hide preloader after 2 seconds
    setTimeout(hideBytesvibe, 2000);
</script>
Code language: HTML, XML (xml)

If we want than we can change the time of this stylish preloader. Change the number in the marked area to change this image preloader time.

Now we can save our theme as we are done with all the work. Click the Save button in the top right corner of the theme HTML editor to apply changes in blogger theme. This way we will have a stylish preloader in blogger sites that show our image or logo when loading a blogger posts. In this way we can show our own logo or icon as preloader in website.

FAQ

What is a preloader?

A preloader is an animation or image that appears while the webpage is loading. It gives users feedback that content is on its way.

Can I customize the blogger preloader image?

Yes! You can change the src attribute of the <img> tag in the preloader HTML to any image URL from the 3rd step.

How long does the preloader display?

In the provided code, the preloader displays for 2 seconds. But we can adjust the time by changing the value in the setTimeout function at step 4.

Is this preloader responsive?

Yes, the CSS provided makes the preloader and the image responsive. It makes sure that it looks good on all devices.

So this is How to Add a Responsive Image Preloader in Blogger website. This is one of the best page loading effect of blogger. Adding a responsive image preloader to Blogger site is a simple yet effective way to enhance user experience and improve blog’s overall aesthetic. Follow the steps outlined above to add this feature. If you have any questions or need assistance, feel free to leave a comment! Remember Bytes Vibe is here to help with anything related to blogger!