Cara Membuat Loading Ala Arlina Design

By Tarsisius Rabu, 29 Maret 2017

Share Tweet Share Pin Email

Syukur alhamdullah pada kali ini saya akan membagikan tutorial ini dari rekan blogger saya ini urlnya http://www.zynationdesign.net/2017/03/cara-membuat-efek-loader-mirip-arlina.html awalnya saya iseng pesen suruh redesainkan blog saya dan dia ngasih tutorialnya katanya bagus efek lodingnya akhirnya saya terapkan di template saya yang ini tapi entah kenapa kok gak work mungkin harus hilangin .js yang lain supaya support.

Pasti tau sobat blog mbak arlina saat kita akses di browser kita ada loding yang warna - warni nah itu bagus banget sobat lodingnya seperti kita lihat gmail yang versi lawas lodingnya juga seperti itu baik sobat blogger tidak usah berbasa - basi kita langsung tutorialnya :

 1. Kalian Cari kode ]]></b:skin> letakan kode berikut di atasnya

./* 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}}

2. Cari Kode </body> letakkan kode di bawah ini di atas nya 

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

3. Cari kode </header> letakan di atasnya juga sobat

<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 Simpan Templates dan lihat hasilnya.

Semoga bermanfaat sobat jangan lupa tinggalkan komentarnya untuk kritik dan saran supaya blog jadi lebih baik.