Loading Effect

by Fansublogger

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h1>Cara Membuat Efek Loading di Blog</h1>

<div class='credit'>
Tada..............
Loading sukses

Silahkan refresh page untuk melihat hasilnya
</div>

<div class='credit'>
  <a class='blog-link' href='http://aisukablog.blogspot.com/2014/02/cara-membuat-efek-loading-di-blog.html' target='_blank'>Kembali Ke Tips</a>
</div>

CSS

#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url('http://4.bp.blogspot.com/-4_hdi8Ph8fE/UYUz5HumQ7I/AAAAAAAAEBE/6KV17KP4RQg/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; }

.credit{
  text-align:center;
  margin:20px 0;
}
.blog-link{
color:#fff;
text-decoration:none;
background:#eee;
background-size:40px;
line-height:50px;
display:inline-block;
padding:0 10px;
border-radius:4px;
border-bottom:3px solid #ddd;
color:#333;
font-family:'open sans',sans-serif;
margin:10px;
}

JavaScript

$(document.body).append('<div id="page-loader">Loading...</div>'); $(window).on("beforeunload", function() { $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); });