Cara Membuat Efek Loader Berwarna

Kata Bijak Romantis Juni 16, 2017 0

Cara Membuat Efek Loader Berwarna - Selain berfungsi sebagai icon loading blog, efek loader berwarna ini juga dapat mempercantik tampilan blog. Efek loader berwarna ini sudah digunakam oleh google dan banyak situs lainnya, seperti Arlina Design.

Dulu animasi loading dibuat menggunakan gambar animasi berekstensi gif, kemudian gambar diletakan pada halaman yang ingin dimunculkan animasi loading. Tapi seiring berkembangnya dunia web development, sekarang efek loading bisa dibuat menggunakan css dan tambahan javascript.


Pada kesempatan ini saya akan berbagi tutorial cara membuat efek loader berwarna pada blog. Efek loader ini akan muncul tepat di bawah header ketika blog sedang entransfer data dari source. Dengan menampilkan animasi warna yang dapat mempercantik tampilan blog. Demo efek loader berwarna ini bisa dilihat di blog saya.

Cara Membuat Efek Loader Berwarna

Berikut langkah membuat efek loader berwarna pada blog

Langkah Pertama
Simpan kode berikut tepat di atas ]]></b:skin>

/* Riswan Net 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}}

Langkah Kedua
Kemudian letakan kode berikut sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
// Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

Langkah Ketiga
Selanjutnya letakan kode javascript berikut di bawah header atau di bagian di mana efek loading akan muncul. Contoh saya meletakannya di bawah 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'/>

Cara Membuat Efek Loader Berwarna

Langkah Keempat
Terakhir simpan template

Nah sekian tutorial cara membuat efek loader berwarna pada blog. Semoga tutorial singkat ini bisa membantu sobat blogger semua dalam meningkatkan blognya. Apabila saya salah atau ada yang kurang jangan lupa untuk mengingatkan saya di komentar. Terima Kasih.