Loading Effect

by est vavivu

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

This Sample Page
</div>

<div class='credit'>
  <a class='blog-link' href='http://www.waysblogger.com/2014/07/how-to-create-loading-effect-on-blogger.html' target='_blank'>Back Tp Widget</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://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.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); });