How to Add preload animation on Blogger website?

In this article I will show you How you can add a cool preload animation style on your Blogger website.

Hello Bloggers. Do you have a Blog website. And do want to make it more cool by Adding cool preload animation on Blogger website. Than you are on right place. Today in this article I will show you How you can add preload animation on your Blogger website. 

How to add preload animation style on Blogger website

In this article I will share some scripts and show you the steps to create a preload animation on your Blogger website. You can also add the animation style only on homepage as well and also on whole website. Read the full article and follow the steps below carefully. 

Before starting with the process download a backup of your theme. In case if something goes wrong you will be able to restore your website safely. And a demo link below. Click on the below link to see a demo of preload animation for Blogger website.

Demo

See demo from above and follow the steps below carefully. 

How to add preload animation on Blogger 

Now Download a Backup of your theme and follow the steps below.

Steps 1: Go to your Blogger Dashboard and click on theme section.

Step 2: Now choose Edit as HTML From theme section and find the ]]></b:skin> or </style> tag or the CSS section of yor theme. And paste the below CSS code right above your ending CSS tag.

/* Preloader Animation In Blogger */

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0f0f0f;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 400ms;
    z-index: 2000;
}

.preloader.hide {
    opacity: 0;
    pointer-events: none;
}

.preloader .preloader-text {
    color: #838383;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 15px;
}

.preloader .dots-container {
    display: flex;
    margin-bottom: 48px;
}

.preloader .dot {
    background: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 5px;
}

.preloader .dot.red {
    background: #ef476f;
    animation: bounce 1000ms infinite;
}

.preloader .dot.green {
    background: #06d6a0;
    animation: bounce 1000ms infinite;
    animation-delay: 200ms;
}

.preloader .dot.yellow {
    background: #ffd166;
    animation: bounce 1000ms infinite;
    animation-delay: 400ms;
}

@keyframes bounce {
    50% {
        transform: translateY(16px);
    }

    100% {
        transform: translateY(0);
    }
}

Step 3: Now copy the below HTML & JavaScript code and paste it right above </body>

<div class="preloader">

        <div class="dots-container">
            <div class="dot red"></div>
            <div class="dot green"></div>
            <div class="dot yellow"></div>
        </div>

        <div class="preloader-text">
            Loading...
        </div>
    </div>

<script>
const preloader = document.querySelector(".preloader");
const preloaderDuration = 500;

const hidePreloader = () => {
    setTimeout(() => {
        preloader.classList.add("hide");
    }, preloaderDuration);
}

window.addEventListener("load", hidePreloader);
</script>

Step 4: Now save the Theme.

Now your preload Animation is ready and you can see it by visiting your website. If you are expert in CSS than you can make an improvement of the script. And make it much more cooler and change the colour as your website category. 

You can also add This preload animation on your custom pages and homepage only. To do that follow the below html code and follow the process as below. 

<b:if cond= 'data:blog.url == "Your_Homepage_URL"'> </b:if>

Now replace the highlighted text with your Homepage url and paste the above HTML and JavaScript between <b:if>  </b:if>. And than use the script on your website. 

Conclusion 

I hope you have successfully added preload animation style on your Blogger website. You can customize the code as much as you want but don't edit the class  name. Otherwise preload animation won't work. If you face any problem or if you have any question regarding Preload Animation style yo can ask me on the comment section. 

Hi! Zakir Here. I am a Bangladeshi Blogger and content writer. I share Blogging related and WordPress tutorial on This website. I have shared lot's of SEO related content as well.

Post a Comment

Don't upload any spam link and words that harms others in the comment box. Please comment using your Google account or with name and urls. Use anonymous only If you are not signed in.
© ZHS ThemE. All rights reserved. Developed by Jago Desain