Efek loader adalah sebuah efek biasanya berupa animasi yang muncul pada saat blog masih dalam proses mentransfer data atau loading. Secara keseluruhan, fungsinya hanya untuk mempercantik tampilan blog saja.
Pada kesempatan kali ini Saya akan berbagi script yang berguna untuk Membuat Efek Loader Warna - Warni seperti gambar di atas. Mungkin biasanya efek loader berwana tersebut sering ditemui di Google. Efek loader warna - warni tersebut bisa kita buat dengan menggunakan css dan tambahan javascript lalu nantinya kita simpan di bawah header atau mungkin dimana saja.
Cara Membuat Efek Loader
1. Masuk Tema lalu Edit HTML
2. Tambahkan kode dibawah ini sebelum ]]></b:skin>
/* ICT-Support Center Page Loader */
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
3. Letakkan kode dibawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>
4. Kemudian, letakkan kode dibawah ini tepat dimana Anda ingin meunculkan efek loading warna - warni nya. Sebagai contoh di blog ini Saya menempatkannya dibawah script menubar
<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/>
5. Jangan lupa Simpan
Untuk memastikan efek loadernya berjalan, silahkan Anda coba dengan mengakses blog tersebut.
Mungkin hanya ini yang bisa Saya bagikan tentang TutorialBlog, semoga bermanfaat. Silahkan share ke teman - teman Anda dan jangan lupa like Fanspage Kami.
0 Comments