Membuat Animasi Loading (Biru)

Membuat Animasi Loading (Biru)

Membuat Animasi Loading - Rata-rata para Blogger sekarang sudah banyak yang menggunakan animasi loading agar nampak cantik . Animasi loading adalah dimana apabila blog kita sedang menuju ke halaman Posting/URL lain maka disitulah terhasil Animasi Loading yang sedang berputar sampai Loading blog selesai. Kali ini , aku copy daripada blog xpress-community.blogspot.com . Apa salahnya, nak berkongsi ilmu .

Langkah-langkah memasang nya :

1. Login ke akaun blog anda .

2. Pilih Rancangan / Template, kemudian Edit HTML .

3. Cari kode ]]></b:skin> Jika sudah jumpa , copy code dibawah dan letakkan diatas 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)}
}

4. Kemudian , pasang JQuery . Cari code </head> lalu letakkan code JQuery diatas code </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

5. Cari kode </body> lalu letakan code dibawah berikut diatas kode </body> .

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
$(&#39;#loadhalaman&#39;).click(function() {
$(this).hide();
});
});
</script>

6. Selesai & lihat hasilnya .