Ads (728x90)

Comments

Latest in Tech

Search This Blog

Recent in Sports

Comments

Powered by Khodedtech

Random Posts

Random Posts

Social

Exchange Monitor

CurrencyInterbank RateParallel Rate
USD306457
GBP374550
EUR326485
Last Modified: March 16, 2017 at 8:19 am

Recent Post

Translate

Recent

Facebook

Facebook

LightBlog

Pages - Menu

Creator

About Me
Munere veritus fierent cu sed, congue altera mea te, ex clita eripuit evertitur duo. Legendos tractatos honestatis ad mel. Legendos tractatos honestatis ad mel. , click here →

Follow us

Adbox

Sponsor

ads

Follow Us

Popular


Pre Loading Spinners
This tutorial will show you how you can add pre loading spinners to your blog. Many of you may have seen it and for those who haven't; its an effect added to blogs which is showed on before the site has loaded completely.  Once the site is loaded it slowly fades away. We encourage everyone to add one of it, as it makes the web more beautiful

Coming back to the post, here I have 5 spinners tweaked for your blogger blogs. The respective coders of these spinners have been credited in the demo page under their creation. You can see the demo below, and ofcourse there would be no fade effect in the demo but surely in the code you would add in your blog.

Live Demo


If you liked any of the spinners and want to add it to your blogger blog then you need to copy the below given code of the respective spinner and paste it just below <body> tag.
Also if you already have jquery plugin in your blog 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>
<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>
<span class="text"><data:blog.title/></span>
</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 () {
                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<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 () {
                $(&quot;.preload-juggle&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<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 () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<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 () {
                $(&quot;.balls&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<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 anyof the above code just below the tag<body> and save the template. After that you would see the loading effect in your blog everytime before the homepage loads.

Post a Comment