<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>
No comments:
Post a Comment