stylish pereloader spinner for Blogger and Wordpress

stylish pereloader spinner for Blogger and Wordpress



Hi, Want Your Website or Blog to look more cool and stylish, Try using one of the Preloaders for Blogger and Wordpress out of 5 that I provide below.

Then how to install it?
First open your Website or Blog dashboard, Edit Themes in HTML, Enter the Preloader Code you want Right Under the "<body>" Tag. Then Save, And See The Results.

There are 5 preloaders below that you can try.


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>


Tags
html preloader codepen, html preloader image, html preloader template, html preloader gif, html preloader jquery, html preloader code, html preloader tutorial, html preloader animation, html preload audio, preloader html and css, html preload ajax, create a preloader html, preloader html bootstrap, html preloader progress bar, best html preloader, html preloader css, preloader html css js, preloader html css code, preloader html css codepen, html css preloading screen, simple preloader html css, html preloader div, preloader html download, html preloader examples, html preloading effect, preloader html free, html code for preloader, preloader for html, preloader for html page, preloader gif html code, html iframe preloader, preloader in html, preloader in html css, preloader in html code, preloader html javascript, html js preloader, html page preloader jquery, preload html javascript, html preloader link, html preloader page, html preloader percentage, html css page preloader, html preload web page, html5 page preloader, html preloading screen, html site preloader, preloader html sample, preloader html stack overflow, simple html preloader, preloader to html, preloader using html and css, html video preload, html5 preloading video, html preloader website, html css website preloader, html preloader yapımı, html5 preloader

Post a Comment

0 Comments