Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

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

Go to Link

Go to Link