Preview the loader HERE
Adding these is very easy, you only need to paste the above code below the line containing <body>
<div id='loader'>
<div class='spinner'>
<div class='spinner-inner'/>
</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: 0px
;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgb(255, 102, 102);
z-index: 1000;
}
.spinner {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ7MIWWnANwEZJOrmOk1QUkoQ4yREP_p2JnZVpQSMlX-EQO-8OTfUJ_fn6xRjRyyDfonnCSEQNbfnsnMoLuzMSjd3DhSKKHXsi1qCx0YuLDGd51FT4tUHfaVLtK781r2XBMsfbWh0H9bE/s1600/loaderred.gif)no-repeat center;
position: fixed;
width: 100%;
top: 70%;
height: 180px;
font-size: 10px;
}
</style> 
Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. I am Really very happy to say that this post is very interesting to read and keep it up bro.
ReplyDeleteVirtual University Assignment Solution