How To Add Preload Animation Effect In Blogger Blogspot

How To Add Preload Animation Effect In Blogger Blogspot - Hey Blogger’s Do you want to add cool preloading effect in your blogger blogspot? If yes then I’ll show you how to add preload animation effect to your blogger website using simple HTML, CSS and Javascript code.

If you don’t know about coding then don’t worry I will tell you step by step Process so you can easily add this effect in your blogger blogspot.

What Is Preloading Effect?

The working of the Preloading Effect in Blogger blogspot are transitions that will appear automatically when pages loading on the blogger and will disappear after the page is fully loaded on your site.

The Preloading effect that I will share with you will not affect the speed of the blogger because it is very light pure CSS and SVG without images.

How To Create Preloading Animation Effect On Blogger

1. Open your Blogger Dashboard.
2. Go to Theme Section and Click Edit Html Option from the Drop-down menu.
3. After Entering into the html section press "Control + F" and Search For ]]></b:skin> or </style> tag and paste the below CSS code above/before it.

CSS

/* Preloader Effect by Blogger4ever.net */
.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f7f7f2;
    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);
}

4. Save your theme...
5. Now again Press Ctrl + F and search for </body> tag and paste the following HTML and Javascript code just above/before it.

JS Script

<!--[ Peloading Script by Blogger4ever.net ]-->  
<div class='preloader'>
        <div class='dots-container'>
            <div class='dot red'/>
            <div class='dot yellow'/>
            <div class='dot green'/>
        </div>
        <div class='preloader-text'>
             Please Wait Loading... 
        </div>
    </div>
<script>
const preloader = document.querySelector(&quot;.preloader&quot;);
const preloaderDuration = 500;

const hidePreloader = () =&gt; {
    setTimeout(() =&gt; {
        preloader.classList.add(&quot;hide&quot;);
    }, preloaderDuration);
}
window.addEventListener(&quot;load&quot;, hidePreloader);
</script>

6. Now Save your Theme and refresh your blog. Preload Animation Effect is added to your blogger blogspot website.

Customization:

If you want to use preloading effect only on homepage of your blogger add conditional tags on both CSS and HTML + Javascript codes.


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

Replace URL with your blog homepage URL, After adding this code snippet on both CSS and HTML Javascript Preloading effect will only work on the homepage of your website and preload animation will not show on other blog pages.

You can further customize the Animation duration by changing 500

Conclusion:
Hope this How To Add Preload Animation Effect In Blogger Blogspot tutorial will be useful to you. Do share with your friends. If you have any doubts related to this article ask me in the comment section.

You might also like: How To Add Code Box With Copy Button In Blogger Post
How To Add Reading Progress Bar In Blogger Blogspot?