random
1

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget

If you have a blogger blog ,then you should  interested to make that blog attractive for visitors with design, plugins, images and videos etc. So that's why today I am going to share with you something different blogger blog widget. That is  5 pre loading blogger blog pages spinners.Here is how!

Shouted Blog's Gift...!
Table Of Contents In Blogger Blog In Form Of Tabbed

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget


Step No. 01:

Go To Your Blogger Dashboard.

Step No. 02:
Select "Template" From Blogger Dashboard.


Step No. 03:
Now Choose "Edit HTML" Option.

Below Are 5 Pre Loading Spinners For Blogger Blog Pages Codes, Just Pick One Code From Them And Paste It Just <body> Tag In Your Template.
And Save Your Template And See The Result Live.

Code No.01

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
      <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>

Code No.02

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
       <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>
        

Code No.03

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
      <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>
          

Code No.04

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
      <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>   

Code No.05

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
Add Amazing Pre Loading Page Spinners For Blogger Blog Widget
      <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>

Try Any One Of The Above  Amazing 5 Pre Loading Spinners For Blogger Blog.

Add Amazing Pre Loading Page Spinners For Blogger Blog Widget Reviewed by Ghulam Haider on 00:26:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.