Pre-Loading Spinners for Blogger Blogs

Hey my wonderful readers and followers, it's being a while I posted on MightyFada but not to worry we back to serve you better.

Today, I will be talking about pre-loading spinners for blogger. Should you realize the new MightyFada design, it has a loading spinner which rolls at the same time the entire blog is loading.

This tutorial will show you how you can add pre-loading spinners to your blog. We encourage every person to add it to their blog, as it makes the blog extra gorgeous.

Coming back to the post, here I've 5 spinners tweaked to your blogger blogs. The respective programmers of these spinners were credited within the demo page beneath their creation. You'll find the demo below, and of course there can be no fade outcomes in the demo but definitely within the code you could possibly add for your blog.

In the event you like any of the spinners and want to add it to your blogger blog then you definitely need to copy the below given code of the respective spinner and paste it just below tag. Also if you have already got jquery plugin for your blog then you can remove it from the code.

Demo 1

<div id="loader"> <div class="spinner"> <div class="spinner-inner"> </div> </div> </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".spinner").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script><br /> <style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z- index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>

Demo 2

<div id='loader'> <div class="wrap"> <div class="bg"> <div class="loading"> <span class="title">loading...</span><br /> <span class="text"><data:blog.title/></span><br /> </div> </div> </div> </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".wrap").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script><br /> <style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

Demo 3

<div id='loader'> <div class='preload-juggle'> <div class='ball'> </div> <div class='ball'> </div> <div class='ball'> </div> </div> </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".preload-juggle").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script><br /> <style> #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);} } </style>

Demo 4

<div id='loader'> <div class="spinner"> </div> </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".spinner").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script><br /> <style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-wiggle 1.2s infinite}@keyframes spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>

Demo 5

<div id='loader'> <div class='balls'> </div> <div class='balls'> </div> <div class='balls'> </div> <div class='balls'> </div> </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".balls").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script><br /> <style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>

Add any of the above code just under the tag and save the template. After that you would see the loading effect to your blog everytime before the homepage loads.