Cara Membuat Flat PreLoader

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5acNotr9x0WhyCjITW8xlAjrwpbUYNU79OrLGTgmg5Suv94fZw0_TG3v_ap9bpsOaO3HtHEiZYM664M1PqZ5hMiZDk4Ehv_Q5O1wWcY303O0OW3X2cFk4-QG8BlxxNkNhrbDRK_KLSJs/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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOuE0i2Ra3vXnoXF7qUQD_g5rghvJvUPIci_Grqj-hjhH0asqlBLtSJIwIwqEPrdnWVDxAE2CHS0gJhf_yFzhkK0k2yQEQ17egGQ0IHEGMjHATS333IqH2gmDtQw2XRmoSShyphenhyphenY_hPXyEXH/s1600/Preloader_CakYit1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2MXjPEPSx2Khgts9sNkb93dfeLSCqBz-YZa9aH8jPJ2yOBz3jzCObETfOqoV9299WkaT8AAhvvB4z6rlaJowm1-_AHgEHepOWPMzb5kmh59d0BoHqfREM96NbOg8PMTW5GEgNRiDNIuGV/s1600/Preloader_CakYit2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigVeo0pqK4kn8wZj_CLpL1kJ1W16bBqatTinewSbDzgLSVndOMYeff0fr8_1LP7aFEw3uoD7furUJsxMiAy7UCChNkLYXBsshzYN6Jn2Aa0UeqoVVCjPRl18-Fo0QGUR0WymeAtFpNydXd/s1600/Preloader_CakYit4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTCsZz4OeGK5yvgP4tSrx-djXLmOPU0bcnbXg3bxqkGrYi_uqhYapaw_Q1gpyAzwrxqlfO-DZkC2hoAfCjKMoTpKI0Z22cnvn2VTxf-GPFJDsY2gdCvh0n7rcuXiyuGAE1LoJj79QLRm0/s1600/Preloader_CakYit3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-vMKVuyKqgs3dfSZTfEnTDvi0iKtXJQB8OcWS_3ttqmAyuca4gyjJXVt3eLmZeRSReaxTqJieQgH9_vT0HfD_1MQU-G2OM7ncsuPuZN2CL5giqsBb1rmhEVURL8j6o_OUdMhhfoW6IYt/s1600/Preloader_CakYit5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPCsIq1rWTDXqzwumLPkNnkkNhOg44XhIMVSG6X6KNsutN7tdBeAhqRq_OEP4OUPW-udiL4op6SxU2NOWC99A9ICzvETXYiFMGqz8NL-c8bC4AflveuM_kCOOB_No8qkcaC9OLbvFHTh8/s1600/Preloader_CakYit6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-7EC33jbb0TDyIaqbgp2usOOcu3Mt42ybIzURMrodAary1Z-H0HcT-YIDFRECPyKxjZsH2CUg6AtlGv4U0_mzWsDfgTYxngU7P4U-eCppeOFBrbyt588SKGA-X53gE8hWSgQaVAAXhQk/s1600/Preloader_CakYit7.gif