How To Add Stylish Preloader In Your Blog.

Hello There Friend!

Hope You Are Fine! In This Post I Am Going To Tell You How To Add Preloader In Your Blog. In This Post You Will Learn About How To Add Preloader In Your Blog And What Is Preloader Also We Will See Why Should I Add Preloader In Your Blog, So Let's Start.

What Is Preloader ?

A Preloader, Or What Is Called A Loading Screen, Is What Some Websites Display Before The Main Content Of The Webpage Loads. The Preloader Can Be Anything! They Can Be Very Simple Or Full Of Animations. 

Why Should I Add Preloader In My Blog?

Preloader Add More Fascinating Thing In Your Blog, It Looks Like You Are Going In The Professional Site, But It Also Decreases The Website Speed So Many Users Avoid It.

How To Add Preloader In Your Blog?

Now We Will Talk About How To Add Preloader In Your Blog, Follow The Given Steps One By One To Add Preloader To Your Blog.
Step 1: First Of All Go To The Bogger Dashboard And Login Into Your Blog.

Step 2: Go To The Theme Section And Click On The Down Arrow .

Step 3: Click On The Edit HTML.

Step 4: Paste The Below CSS Code Just Above The ]]></b:skin> Tag.

CSS

/* 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 5: Now Copy The Below HTML Code And Below And Add It Above The </body> Tag.

HTML

<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 6: Click On The Save Button.

Boom We Have Added The Preloader In Your Blog, We Have Completed Adding Blogger In Your Blog, If You Have Any Problem In Adding The Preloader To Your Blog. You Can Tell Me In The Comments.

Thanks For Reading.