Cara Pasang Animasi Preloading Pada Blog

PayuBaco
Kecepatan sebuah blog nampaknya menjadi topik yang menarik dibahas dalam sebuah blog, banyak sekali tutorial yang diberikan untuk membuat blog yang kita miliki memiliki kecepatan yang memadai. Salah satu hal yang dapat dilakukan ialah menyiasati dengan cara memberikan effect pre loading sebelum halaman blog selesai dimuat. Preloader ialah sebuah transisi yang digunakan untuk menjadi alat jeda waktu sekaligus penghibur bagi pengunjung saat blog sedang loading memuat sebuah halaman.

Memang pada dasarnya effect pre loading ini tidak akan terlalu berpengaruh terhadap kecepatan blog sobat karna effect yang digunakan murni menggunakan CSS dan SVG tanpa menyisipkan gambar. Jika sobat merasa tertarik untuk menggunakan effect pre loading ini silahkan simak tutorial ini dengan seksama. 

Sebelum ketutorial sobat lebih dulu harus memasang JQuery pada template sobat. Pastikan JQuery didalam template blog sobat merupakan JQuery library versi 1.7.1, jika bukan versi tersebut silahkan sobat letakkan kode dibawah ini tepat dibawah kode <head>. 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Selanjutnya ikuti langkah berikut ini :
1. Silahkan sobat masuk atau menuju Dashboard Blog.
2. Pilih Tema kemudian Edit HTML
3. Tambahkan kode dibawah ini tepat sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; Dengan cara klik Ctrl+F untuk mencari kode ya. 
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
4. Selanjutnya letakkan kode HTML dibawah ini tepat dibawah kode <body> 
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>
5. Lalu Letakkan kode CSS dibawah ini tepat sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; 
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>
6. Silahkan simpan template dan lihat hasilnya. 

Berikut Demo hasilnya (Klik Result)

Jika sobat ingin menggunakan efek loading lainnya sobat bisa menggunakan yang sudah saya siapkan dibawah ini cukup dengan mengganti kode CSS dan HTML nya. 

Efek 2

Efek 3

Efek 4

Efek 5

Efek 6

Efek 7

Jika sobat merasa kurang suka dengan efek diatas sobat juga bisa mencari efek lainnya di situs penyedia loading ya di https://icons8.com/cssload untuk mendapatkan kode ya silahkan simak tutorial dibawah ini.
  1. Silahkan sobat kunjungi https://icons8.com/cssload.
  2. Pilihlah jenis kategori loading yang sobat inginkan, ada Spinner, Horizontal Bar, 3 Dimensional, Miscellaneous, dan Animated Text.
  3. Setelah memilih jenisnya, silahkan klik pada efek loading mana yang sobat inginkan. 
  4. Lalu klik Get Code. 
  5. Silahkan Copy kode HTML dan CSS yang tersedia. Untuk menerapkan ya silahkan ikuti tutorial pertama tadi ya. 
Demikianlah tutorialnya semoga bisa digunakan dengan baik, jika sobat mengalami kesulitan bisa simak video dibawah ini. 

Gimana sobat, mudah bukan?. Itulah tutorial kita pada kali ini, terima kasih telah berkunjung di Blog ini. Mohon maaf jika dalam penulisan terdapat kesalahan, jika sobat mengalami kesulitan dalam mengikuti tutorial diatas silahkan bertanya dikolom komentar. Mohon bantuannya untuk share artikel ini ke teman blogger yang lain. Terima kasih dan sampai jumpa diartikel selanjutnya.