Subscribe Youtube Channel Muxic 0.9 ♪ Contact Us Subscribe!

How to Add Preloader Effect on Blogger Site

Boost your Blogger site's appeal with a sleek preloader effect! Follow our simple guide to keep visitors engaged while your content loads.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Preloader Effect on Blogger

Let's Begin

How Preloader Spinner Work?

You may see this spinner loader anywhere on your Blogger blogs. You will choose to focus only on a single page or post, only on static pages, only on post pages, and only on the homepage. I would advise, nevertheless, to limit its display to the homepage. Applying this outcome to your whole blog makes you want to reconsider what constitutes a good user proficiency. 

Add Preloader Effect on Blogger

Step 1: Open your blogger dashboard

Step 2: Next, Click on the "Theme" Section and Click Edit Html Option

Step 3: After, Find ]]></b:skin> Tag on Theme

Step 4:  Copy the below CSS Script and paste above on ]]></b:skin> Tag.
/* Preloader effect by Trick With Abdullah */

.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);
    }
}
Step 5: Next, Find the </body> Tag on theme Script
Step 6: Copy the below Html+JavaScript code and Paste it Above on </body> Tag.
<div class='preloader'>

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

        <div class='preloader-text'>
             Loading...Wait a Moment
        </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>
Step 7: And in Last Don't forget to click on "Save" to save the template.
Step 8: That's it, Now Your Preloader Script is Ready to Rock

About the Author

Welcome to my Site! Hi, this is Mr.Abdullah. If you have any questions related to this blog you can find us here on Instagram @abdullahdcurz Or, you can mail us here: abdullahdcurz@mail.com. Thank you.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.