Membuat loading cubic animasi

MurliCyber    8/06/2014    Css3 , Original post , Tutorial blog    Comment   

Yeay,membuat efeck loading pada blog membuat blog kita lebih menarik apa lagi jika koneksi lagi lelet saat membuka suatu halaman blog,jika blog tersebut tidak menerapkan efek loading di blog nya maka saat pengunjung koneksi nya lagi lelet dia tidak bisa merasakan efek loading di blog tersebut,alias simple cuma loading di browser nya keliatan

nah,bagai mana kalau kita mererapkan efek loading dengan bentuk cubic animasi?

pemakaian nya pun sangat simple,sehingga ketika blog kita di load oleh browser efek loading nya akan keliatan dan gak bikin pengunjung bosan

dari pada penasaran yuk pasang

1.loading cubic animasi ini menggunakan jquery,letakkan kode ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

2.letakkan kode di bawah ini di atas kode ]]><b:skin

#page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;
left:0;z-index:9999;background:#fff url('http://2.bp.blogspot.com/-t2gSISF0Sdc/U4XzAzFl5qI/AAAAAAAADVY/nYmOzAOnbus/s1600/Loader3.gif') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

3.next,letakkan kode di bawah ini di atas kode </body> 

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading....</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

dan liat hasil nya,gampang kan
udah dulu yah post gw kali ini,jangan lupa ninggalin jejak di komentar

see you