How To Add Loading Animation In Blogger.

Hello Friends In These Post Today I Will Provide Loading Animation For Blogger So Friends If You Find Many Videos And More Articles But You Dont See Any Loading Animation. But Today i Will Provide My Site Loading Animation For Blogger. So friends If You Visit Our Site You can See A Loading Animation On Blogger.

Friends In these Post Today We Are Providing Our Site Loading Animation For Blogger. Friends if you Are using Wordpress And More So You can Add Some Themes So You can Esily add Loading Animation But Friends In Blogger you Dont See Any Type Of option But I Found And I Will Give Loading Animation For Your Site. So Friends Dont wait. And Download Loading Animation.

Loading Animation For Blogger.

Friends You Alredy See A Example Of Loading Animation If You Visit Our Site So You can See Wait Bro Loading Animation. 

Friends In These Post You Will get Two codes First Is Css And Second is HTML So How Can We Put Codes On Blogger Themes. So Friends Continue Read Our Post You can Now Esily Put Codes On Themes Section. 

Loading Animation For Blogger - Kingrtk.com
Loading Animation For Blogger - Kingrtk.com

How To Download Loading Animtion For Blogger And PUT.

Friends You Can Easily Download Our TXT File And See How can You Put code On Blogger Theme.

How To Add Loading Animation Code In Blogger.

STEP 1 - First For All Friends Go To Blogger Dashboard And Backup Your Theme.

STEP 2 - Now Friends Go To EDIT HTML And Serch  ]]></b:skin>  Tag And Paste The CSS Code Above IT.


]]></b:skin>  
/* 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 Friends Serch </body> Tag And paste the HTML And Java Script Code Just Above IT.


</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>
Friends I Hope You Have Added Loading Animation On Your Blogger Post.