Sahabat Hack4rt
yang baik hatinya dan ganteng-ganteng seperti admin *loh hehe.
Kali ini saya
Noval akan memberikan tutorial cara membuat animasi Loading
di blog. Tutorial ini saya dapatkan di
Om-Dayz blog, kalau menurut blog Om-Dayz "Animasi loading blog bisa memberikan
efek manipulasi terhadap
loading blog agar nampak lebih cepat". Di
blog Hack4rt
juga telah 'terpasang' animasi loading
halaman ini.
Contoh Loading Animasi dengan CSS
Pasang CSS Animasi Loading
Taruh kode
CSS
berikut di atas
kode
]]></b:skin>
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Pasang JQuery Terbaru
pasang script
jquery 1.7.2 tepat di
atas tag
</head> atau
kalau ada
JQuery terbaru, silahkan pasang yang terbaru.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Pasang Script Loading Animasi
Letakkan kode
berikut tepat
di atas tag
</body>
<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
Penyesuaian Warna
Tambahan dari Hack4rt, untuk yang ingin menyesuaikan warna loading nya dengan warna lain, karena Hack4rt memakai kode
#00a3ff pada loading halaman. Jika ingin mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang
ditulis dengan warna
birumuda dengan kode warna yang diinginkan.
Terimakasih telah membaca artikel Cara Membuat Animasi Loading Blog. Anda bisa bookmark halaman ini dengan URL http://hack4rt-blog.blogspot.com/2013/03/cara-membuat-animasi-loading-blog.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.
