Cara Membuat Animasi Loading Di Blog
Posted by Unknown on Kamis, 21 Maret 2013
Kali ini saya 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". Daripada bingung mending langsung saja ke caranya.. :)
Taruh kode CSS berikut di atas kode ]]></b:skin>
Pasang JQuery Terbaru
#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 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>
Keterangan :
untuk yang ingin menyesuaikan warna loading nya dengan warna lain,bisa mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna biru muda dengan kode warna yang diinginkan.
- Jika ingin memilih kode warna bisa dilihat disini
Sekian Tutorial saya tentang Cara Membuat Animasi Loading Di Blog, Dan jangan lupa tinggalkan jejak :D
Source : Hack4rt
Source : Hack4rt
Judul : Cara Membuat Animasi Loading Di Blog
Label :
Tutorial
URL : http://wahyu-only.blogspot.com/2013/03/cara-membuat-animasi-loading-di-blog.html
Panjang bener sob kode scriptnya :D di tunggu visitbacknya :)
BalasHapus.Hehe..iya sob panjang..
Hapus.ok,langsung ke tkp..
mau pake si diblogku, tapi blogku udah berat bangett...
BalasHapuskebanyakan kode kodeee.. huhuuu
iya,Mendingan jgn dipake mbak,dripada berat loadingnya..
Hapusdah lama cari tips bikin loading ini... makasih ya...
BalasHapusSama" sob. .
Hapusmakasih ya sob.. infonya sgt bermanfaat...
BalasHapusMasama sob :) makasih kunjungannya
Hapusini yang saya cari.. kunjungan balik sob ke blog ku (c) :d
BalasHapusOk sob
Hapussip mantab.. sudah ane terapin mas :D
BalasHapusMoga tambah bagus ya sob :D
Hapuswahhhh thx bget ni atas info ny
BalasHapusntar aku coba
visit blogku ya jangan lupa tinggalkan comment
http://www.vzshare.blogspot.com
ntar ak visit blog kalian n tinggalin comment
Ok masama sob. .
Hapuskagak bisa di blog ane gan. apa mungkin ada yang terlupa ya..
BalasHapuskalo di blog sobat sudah ada jQuery gak usah dipasang lagi...
HapusCakep Sob
BalasHapusMohon Kunjungan Di
http://autodidakku.blogspot.com
Siapa gan yg cakep..ane ya :D
Hapus