Blogger Preloder code
Free blogger and website code
अगर आप अपने ब्लॉगर या वेबसाइट में प्रीलोडर का उपयोग करना चाहते हैं तो अभी इस कोड को </Head> नीचें डाले औऱ save करके तुरन्त रिफ्रेश करें।
Demo No.1
<link href='//cdn.rawgit.com/knigulper/github.io/gh-pages/www.knigulper.com/Preloader2.css' rel='stylesheet'/> <script>$(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); $('h1').css('color','#222222'); }, 3000 ); });</script> <body class='demo'> <div id='demo-content'> <div id='loader-wrapper'> <div id='loader'/> <div class='loader-section section-left'/> <div class='loader-section section-right'/> </div> </div> </body>
Demo 2
<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>
Next....
0 Comments:
Post a Comment
Thanks for comment.
By: Online Govt University