Buy Plus UI v2.5! Demo Buy Now!

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.

Adding Preloader for Blogger Bird Style

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.

Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.