Adding Preloader for Blogger Bird Style

Hello Bloggers How are you I hope you are doing well. Welcome to Tech Aadi Blog.

I hope you know about Preloader because previously I have shared one Preloader tutorial. So just like that this is also the same just the animation is changed.

So today we are going to see Adding Preloader for Blogger Bird Style. And you will love it.

This is very simple process and all you have to do is to follow the below given process carefully.

So let's start the Process of Adding Preloader for Blogger as Bird Loading Style.

Adding Preloader For Blogger

Step 1:- Open Your Blogger dashboard.

Step 2:- Now go to the Layout section.

Step 3:- Now click on Add a Gadget. A popup box will appear.

Step 4:- Now click on HTML/JavaScript.

Step 5:- Now leave the title blank and Copy the below given code and paste it in the content section.

<style>
     .loadd {
        position: fixed;
        background: #6944ff;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh
    }
    
    .body {
        position: absolute;
        top: 50%;
        margin-left: -50px;
        left: 50%;
        animation: speeder .4s linear infinite
    }
    
    .body > span {
        height: 5px;
        width: 35px;
        background: #fff;
        position: absolute;
        top: -19px;
        left: 60px;
        border-radius: 2px 10px 1px 0
    }
    
    .base span {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 100px solid #fff;
        border-bottom: 6px solid transparent
    }
    
    .base span:before {
        content: "";
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        right: -110px;
        top: -16px
    }
    
    .base span:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 0 solid transparent;
        border-right: 55px solid #fff;
        border-bottom: 16px solid transparent;
        top: -16px;
        right: -98px
    }
    
    .face {
        position: absolute;
        height: 12px;
        width: 20px;
        background: #fff;
        border-radius: 20px 20px 0 0;
        transform: rotate(-40deg);
        right: -125px;
        top: -15px
    }
    
    .face:after {
        content: "";
        height: 12px;
        width: 12px;
        background: #fff;
        right: 4px;
        top: 7px;
        position: absolute;
        transform: rotate(40deg);
        transform-origin: 50% 50%;
        border-radius: 0 0 0 2px
    }
    
    .body > span > span:nth-child(1),
    .body > span > span:nth-child(2),
    .body > span > span:nth-child(3),
    .body > span > span:nth-child(4) {
        width: 30px;
        height: 1px;
        background: #fff;
        position: absolute;
        animation: fazer1 .2s linear infinite
    }
    
    .body > span > span:nth-child(2) {
        top: 3px;
        animation: fazer2 .4s linear infinite
    }
    
    .body > span > span:nth-child(3) {
        top: 1px;
        animation: fazer3 .4s linear infinite;
        animation-delay: -1s
    }
    
    .body > span > span:nth-child(4) {
        top: 4px;
        animation: fazer4 1s linear infinite;
        animation-delay: -1s
    }
    
    @keyframes fazer1 {
        0% {
            left: 0
        }
        100% {
            left: -80px;
            opacity: 0
        }
    }
    
    @keyframes fazer2 {
        0% {
            left: 0
        }
        100% {
            left: -100px;
            opacity: 0
        }
    }
    
    @keyframes fazer3 {
        0% {
            left: 0
        }
        100% {
            left: -50px;
            opacity: 0
        }
    }
    
    @keyframes fazer4 {
        0% {
            left: 0
        }
        100% {
            left: -150px;
            opacity: 0
        }
    }
    
    @keyframes speeder {
        0% {
            transform: translate(2px, 1px) rotate(0deg)
        }
        10% {
            transform: translate(-1px, -3px) rotate(-1deg)
        }
        20% {
            transform: translate(-2px, 0px) rotate(1deg)
        }
        30% {
            transform: translate(1px, 2px) rotate(0deg)
        }
        40% {
            transform: translate(1px, -1px) rotate(1deg)
        }
        50% {
            transform: translate(-1px, 3px) rotate(-1deg)
        }
        60% {
            transform: translate(-1px, 1px) rotate(0deg)
        }
        70% {
            transform: translate(3px, 1px) rotate(-1deg)
        }
        80% {
            transform: translate(-2px, -1px) rotate(1deg)
        }
        90% {
            transform: translate(2px, 1px) rotate(0deg)
        }
        100% {
            transform: translate(1px, -2px) rotate(-1deg)
        }
    }
    
    .longfazers {
        position: absolute;
        width: 100%;
        height: 100%
    }
    
    .longfazers span {
        position: absolute;
        height: 2px;
        width: 20%;
        background: #fff
    }
    
    .longfazers span:nth-child(1) {
        top: 20%;
        animation: lf .6s linear infinite;
        animation-delay: -5s
    }
    
    .longfazers span:nth-child(2) {
        top: 40%;
        animation: lf2 .8s linear infinite;
        animation-delay: -1s
    }
    
    .longfazers span:nth-child(3) {
        top: 60%;
        animation: lf3 .6s linear infinite
    }
    
    .longfazers span:nth-child(4) {
        top: 80%;
        animation: lf4 .5s linear infinite;
        animation-delay: -3s
    }
    
    @keyframes lf {
        0% {
            left: 200%
        }
        100% {
            left: -200%;
            opacity: 0
        }
    }
    
    @keyframes lf2 {
        0% {
            left: 200%
        }
        100% {
            left: -200%;
            opacity: 0
        }
    }
    
    @keyframes lf3 {
        0% {
            left: 200%
        }
        100% {
            left: -100%;
            opacity: 0
        }
    }
    
    @keyframes lf4 {
        0% {
            left: 200%
        }
        100% {
            left: -100%;
            opacity: 0
        }
    }
  </style>


<div class='loadd'>
    <div class='body'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class='base'>
            <span></span>
            <div class='face'></div>
        </div>
    </div>
    <div class='longfazers'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
    $(window).load(function () {
        setTimeout(function () {
            $(".loadd").fadeOut("slow");
        }, 500)
    });
</script>

Step 6:- Now click on Save.

That's all. Now I hope you have successfully installed Flying Bird style Preloader on your blogger blog.

The benefits of adding this preloader from layout section is that you can enable disable this preloader easily. And if you don't want it you can also remove it easily.

Conclusion

So this article is about Adding Preloader for Blogger Bird Style. I hope you like this article if you got any query kindly do comment below. And like and follow our blog for more post like this daily.

Go to Link