Membuat Preloader Dengan JQUERY PreloadMe

Membuat Preloader Dengan JQUERY PreloadMe

Selamat Malam Sobat,IDTemplates Bertemu lagi dengan saya,Di update'an Postingan kali Ini,Maaf saya baru posting sekarang karena, Saya kehilangan Inspirasi dalam menulis,dan masih mencari lagi bahan postingan yang ingin saya bahas..

Pada bahasan kali ini saya akan membahas tentang membuat Preloader dengan menggunakan JQUERY Preloadme ,Sebenarnya Bahasan ini Sudah terlebih dahulu di bahas di blog sebelah,Tetapi tidak ada salahnya Jika saya mendaur ulang Tutorial ini agar Lebih banyak di kenal...


Image Source : https://justirva-kode.blogspot.com/

Oke,Langsung saja kita praktekan 

1. Login Ke Akun Blogger Kalian Masing-Masing
2.Buka Tema => EDIT HTML
3. Lalu masukkan Kode berikut. di atas kode </head>

$(window).on("load",function(){var d=1500;$("#status").delay(d).fadeOut(),$("#preloader").delay(d).fadeOut("slow"),$("body").delay(d).css({overflow:"visible"})});

4.Pasang CSS Berikut Tepat di </b:skin> atau </style>


/* KODE PRELOADER -- http://idtemplatez.blogspot.com/ */
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;color:#7EC169;z-index:99}
#status{width:130px;height:130px;position: absolute;left:0 0 -100px;text-align:center}
#status .loader-img{width:100%;margin-bottom:15px}
#status b{margin:15px auto;display:block;font-family:'Roboto','Open Sans','Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#FFF;text-align:center;}
/*Default */
@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-clip-rotate > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #fff;border-bottom-color:transparent;height:26px;width:26px;background:transparent!important;display:inline-block;-webkit-animation:rotate 0.75s 0s linear infinite;animation:rotate 0.75s 0s linear infinite}

5.Lalu Tempatkan Kode HTML Di bawah ini,sesuai selera anda :

<div id="status">
        <img class="loader-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ByIIW4ACT9FaFj6Ub2RS7e0Gq4DVPDINMR6QcDSxrRF7OnxcXMsK7ArRM3Xcz1CsbeYIYaAk5Zp6kkCHbGTmG_Qsz9JICS7y8t9QyPSoKXwRkCQaNPgd8QaFcVDQq1YKeFztCpSUzBg/s1600/chibi_yoshino_by_kurama_chan.png"/>
        <b> Tunggu </b>
        <div class="loader-inner ball-clip-rotate><div></div></div>
    </div>
</div>
<div>
Konten Kamu
</div>

Sekian,Tutorial Kali Ini Jika,Kalian ada Kesulitan Bisa Ngobrol di Kolom komentar, Terimakasih ..