Today I will show you how to add pre loading spinners to a blog. This is a visual efect which shows before loading your blog or website. When your site get load, this effect fades away. I recommend everyone to try this to make your blog more attractive and see which work best for you.
Today I am sharing 5 pre loading spinners for your blogger blogs.
Amazing Pre Loading Spinners for Blogger Blogs : eAskme
Other people are reading : 50 DoFollow CommentLuv Enabled BlogsTo make these spinners work for you all you need to do is add spinner code to.
How to Add Most Amazing Pre Loading Spinners Code to blog:
- Go to Blogger.com
- Login.
- Go to your blog dashboard.
- Go to "Template".
- Click on "Edit Template".
- Copy any code from below give codes.
Most Amazing Pre Loading Spinners
Code 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>
Code 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 () { $(".wrap").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 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 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><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 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><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 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><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>
- Paste the code below <body> tag.
- Now you have this Pre Loading Spinner active on your blog.
Don`t forget to like us on faceboook and subscribe eAskme newsletter to get free updates.
