Top 5 Pre Loading Spinners for Blogger Blog
Spread the love
Whats up Guys ! 
Modern high-speed Internet has really made us spoiled. These days, if a website takes more than 4 seconds to load, we tend to not even bother waiting; we simply close the page and find something else. It is very beneficial for the reader as nicely because it will increase the splendor of your weblog or it’ll now not have an effect on the search engine optimization of your blog or website.

“Loading” impact suggests a technique bar when page loading just like the photo graph above. This impactis very beneficial for the internet site. If loading time of your internet site is goodbye, readers may think your  was down and locate every other internet sitebut in case of adding a loading bar, readers might imagine the web page is being processed and maintain ready complete page load.
There are many approaches to create a loading effectin this publish, I want to introduce the perfect wayhere are some thoughts and suggestion of loading consequences that you can observein your design. Allow‘s strive how to set this in your blogger blog.
I have five spinners tweaked on your blogger blogs. The respective coders of these spinners had been credited in the demo web page underneath their creation. you may see the demo beneath, and ofcourse there might be no fade impact in the demo but without a doubt within the code you’ll add in your weblog.
if you favored any of the spinners and need to feature it in your blogger weblog then you definitely want to duplicate the beneath given code of the respective spinner and paste it just beneath tag. also if you have already got jquery plugin to your blog you could take away it from the code.

Pre Spinners for Blogger Blog

Demo 1 : 


       

           

       

   


   
        $(window).load(function () {
            setTimeout(function () {
                $(“.spinner”).fadeOut(“slow”);
                setTimeout(function () {
                    $(“#loader”).fadeOut(“slow”)
                }, 1000)
            }, 1000)
        });
   


Demo 2 :





loading…



   
        $(window).load(function () {
            setTimeout(function () {
                $(".wrap").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
   


Demo 3 :



 

 

 




   
        $(window).load(function () {
            setTimeout(function () {
                $(".preload-juggle").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
   

#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000}
.preload-juggle {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}
.preload-juggle div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;}
.preload-juggle div:nth-child(1) {animation-delay: -0.7s;}
.preload-juggle div:nth-child(2) {animation-delay: -1.4s;}
@keyframes juggle {
0% {transform: translateX(0px) translateY(0px);}
12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;}
25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out;  }
37.5% {transform: translateX(25px) translateY(55px);}
50% {transform: translateX(0px) translateY(0px);}
62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; }
 75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;}
87.5% {transform: translateX(-25px) translateY(55px); }
100% {transform: translateX(0px) translateY(0px);}
}


Demo 4 :



   


   
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
   


Demo 5 :








   
        $(window).load(function () {
            setTimeout(function () {
                $(".balls").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
   

Add any of the above code just below the tag and save the template. After that you would see the loading effect in your blog every time before the homepage loads.

Related posts

Related Posts

3 thoughts on “Top 5 Pre website Loader Spinners for Blogger Blog

Leave a Reply

Your email address will not be published. Required fields are marked *