Cara Membuat Efek Loading Warna-Warni Seperti Arlina Design

Cara Membuat Efek Loading Warna-Warni Seperti Arlina Design

AdminBlog

March 13, 2017

Cara Membuat Efek Loading Warna-Warni Seperti Arlina Design - Selamat Sore, kali ini saya akan membagikan Cara Membuat Efek Loading Warna-Warni Seperti Arlina Design, dihalaman OOT Arlina Design banyak yang bertanya bagaimana cara membuat efek loading yang digunakan oleh beliau dan pertanyaan tersebut belum di tanggapinya, maka hari ini saya akan membuatkan cara membuat efek tersebut, untuk lebih jelasnya bisa kalian lihat situs http://www.arlinadzgn.com/ atau di blog ini.

Nah saya akan bagikan caranya, caranya tidak terlalu sulit. Jika penasaran dan ingin mencobanya, ikuti cara di bawah :

Membuat Efek Loading Warna-Warni Seperti Arlina Design

1. Masuk Template > Edit HTML

2. Letakkan kode dibawah ini sebelum kode  ]]></b:skin>

/* 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. Kemudian letakkan kode dibawah ini sebelum kode  </body>

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

4. Terakhir letakkan kode dibawah ini sebelum kode </header> bisa saja diletakkan dilain tempat asal kalian suka.

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

Gimana? Tambah cantik seperti Arlina Design belum blognya. Mungkin hanya itu dulu Tutorial Bloggernya, jika ada yang ingin ditanyakkan silahkan tinggalkan dikomentar.

Tutorial Blogger • March 13, 2017