Cara Membuat Flat PreLoader

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Flat PreLoader ". Loading Ini Emang Menurut Saya Bagus & Responsive.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Flat PreLoader

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode </body> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Masukkan Kode Di Bawah Ini Di Atas Kode </body>

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Anda Dapat Mengganti Flat Loadingnya Dengan Gambar Di Bawah Ini
4. Klik Simpan

Flat Loading Lainnya

http://3.bp.blogspot.com/-5hcmQOHcDxI/VpY0wicvjYI/AAAAAAAAB4M/nUQK8acZpzg/s1600/Preloader_CakYit1.gif

http://4.bp.blogspot.com/-DR1jQf24Mk8/VpY0zPYekfI/AAAAAAAAB4U/bgnVi2SFuUY/s1600/Preloader_CakYit2.gif

http://1.bp.blogspot.com/-EZPzTn-3vEA/VpY00Kt0zlI/AAAAAAAAB4c/lmzvXr1-e04/s1600/Preloader_CakYit4.gif

http://1.bp.blogspot.com/-aIEQJLFnnSg/VpY03MMHsrI/AAAAAAAAB4k/l8xCZDzmkkM/s1600/Preloader_CakYit3.gif

http://3.bp.blogspot.com/-vIrUTcG5avM/VpY06HkYQTI/AAAAAAAAB4s/odhcMSHO0wk/s1600/Preloader_CakYit5.gif

http://4.bp.blogspot.com/-lPOm9yIQ77M/VpY07yTV20I/AAAAAAAAB40/gifguA11J-M/s1600/Preloader_CakYit6.gif

http://3.bp.blogspot.com/-JADp4KZdYCM/VpY0_P7zT1I/AAAAAAAAB48/2w59gAI3iQE/s1600/Preloader_CakYit7.gif

Tag : CSS, Effect Loading