Cara Mudah Membuat Loading Effect Ala Jalantikus

Cara Mudah Membuat Loading Effect Ala Jalantikus - Kali ini cara-mei akan memberikan tutorial tentang membuat loading effect seperti yang diterapkan di salah satu situs terbesar di indonesia, yaitu jalantikus. Jika kalian perhatikan pada menu navigasi web tersebut, maka akan ada animasi seperti loading effect ketika kursor diletakkan di salah satu menu navigasi di web tersebut. Nah karena terlihat menarik dan terkesan keren, maka cara-mei akan membuat tutorialnya. Mungkin tidak bisa persis seperti yang ada di web tersebut, namun setidaknya kita juga bisa membuat loading effect yang mirip seperti jalantikus.

Kode yang akan kita gunakan terdiri dari kode css,html dan javascript. Bagi kalian yang tidak ingin loading blognya tambah lama, kalian bisa skip tutorial ini, dan baca tutorial lain tentang mempercantik tampilan blog.

Baca juga : Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Langsung saja kita menuju ke tutorial Cara Mudah Membuat Loading Effect Ala Jalantikus

1. Edit template blog kalian, dan copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>

  

/* Page Loader cara-mei*/
.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}} 
 

2. Copy kode javascript dibawah ini dan paste tepat diatas kode </body>

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

3. Terakhir copy kode dibawah ini, dan letakkan dimanapun kalian mau. Misalkan dibawah menu navigasi, maka cari kode menu navigasi, dan letakkan dibawah kode menu navigasi, biasanya menu navigasi di akhiri dengan kode </nav> , </navigation> , </menu> dll, tergantung template masing-masing.

 

<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'/> 
 

4. Save dan lihat hasilnya.

Jika kalian binggung soal penempatan kode nomor 4, silahkan berkomentar dibawah, akan saya pandu sampai bisa.
Sekian tutorial kali ini, semoga bisa mempercantik blog kalian, dan membuat kalian semangat dalam dunia blog. Jangan lupa share ke teman-teman kalian. Happy Blogging ^_^