Cara Membuat Pre Loader Yang Ringan Di Blogger Dengan Javascript
Pre Loader adalah merupakan sebuah efek animasi yang muncul tiap pemuatan konten blog atau halaman blog dimuat yang berfungsi sebagai transisi.
Efek seperti ini sangat cocok bagi kalian yang lebih mementingkan desain dari blog itu sendiri.
Kebanyakan juga mereka yang memasang efek ini hanya untuk menghiasi blog mereka supaya terlihat mewah.
Sebenarnya tutorial semacam ini sudah banyak sekali tersebar di internet, tetapi kebanyakan menggunakan dukungan jQuery yang akan memberatkan kinerja blog.
Solusi supaya kita bisa tetap memasang efek ini tanpa harus menambah beban loading blog/website kita akan di bahas di sini.
Cara Kerja Efek Pre Loader
Seperti yang sudah kita singgung di awal bahwa efek ini bekerja sebagai transisi saat konten blog atau halaman blog kita dimuat. Ini akan memberikan kesan kepada pengunjung blog karena para pengunjung tak akan melihat tampilan blank putih saat konten blog kita dimuat.
Tampilan blank putih saat konten blog dimuat akan tertutupi oleh efek pre loader ini. Dan akan hilang saat konten blog kita sudah dioad sempurna.
Apakah Akan Menambah Beban Kecepatan Pada Blog?
Jawabannya adalah tidak, karena kita hanya akan menggunakan javasript tanpa kode eksternal. Apalagi efek animasi yang akan kita gunakan menggunakan icon berformat SVG, yang dimana bahwa icon SVG mempunyai kemampuan kompres kode yang sangat baik.
Efek pre loader yang akan kita buat ini hanya menggunakan javascript murni, jadi jangan khawatir akan performa kecepatan blog karena kita tidak menggunakan kode eksternal.
Sebelum kita bahas cara pembuatannya, jika kalian ingin melihat demonya silahkan klik tombol demo di bawah ini.
Cara Membuat Efek Preloader
Langkah 1. Backup terlebih dahulu template kalian untuk menjaga hal-hal yang tidak diinginkan dengan cara buka Dasboard Blogger kalian lalu masuk ke Tema ➤ Cadangkan Tema.
Langkah 2. Lalu masuk lagi pada Tema ➤ Edit HTML.
Langkah 3. Salin dan tempelkan kode di bawah ini di atas kode ]]></b:skin>.
/* preloader by Siap Ngoding */
.siap-pre-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9999999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-animation: fade 3s forwards;-moz-animation: fade 3s forwards;-o-animation: fade 3s forwards;animation: fade 3s forwards;}
.siap-pre-wrap .siap-pre-start{position:relative;top:50%;left:50%;padding:30px;display:flex;background:transparent;flex-direction:column;align-items:center;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
.siap-pre-wrap .siap-pre-start svg{width:100px;height:100px;margin:auto;display:inline-block}
@-webkit-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-o-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}Langkah 3. Lanjutkan dengan memaasng kode di bawah ini tepat di bawahkode <body>.
<div class='siap-pre-wrap'>
<div class='siap-pre-start'>
<!--[ Icon Loading ]-->
<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>
<!--icon loading end-->
</div>
</div>Pada bagian yang saya tandai silahkan ganti icon loading sesuai selera kalian masing-masing. Saya sudah menyiapkan alternatif pilihan icon loading svg di bawah ini.
<svg version='1.1' id='L4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='26' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='46' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg><svg version='1.1' id='L5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 15 ; 0 -15; 0 15' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='30' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 10 ; 0 -10; 0 10' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='54' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 5 ; 0 -5; 0 5' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg><svg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <rect x='20' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='30' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='40' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> </svg><svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>Langkah 4. Terakhir salin dan tempelkan kode javascript berikut tepat di atas kode </body>
<script>
//<![CDATA[
//preloader by siapngoding | https://www.siapngoding.my.id
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0.2(\'3\',1(){4(1(){0.5(\'.6-7-8\').9.a=\'b\'},c)});',13,13,'document|function|addEventListener|DOMContentLoaded|setTimeout|querySelector|siap|pre|wrap|style|display|none|3000'.split('|'),0,{}))
//]]>
</script>Lalu klik Simpan.
Penutup
Jadi seperti itulah cara membuat efek preloader yang ringan di blogger. Terimakasih sudah berkunjung.
Referensi:
www.wendycode.com
