Membuat Page Loader Sederhana Ala Arlina Design

Membuat Page Loader Sederhana Ala Arlina Design

Pada tutorial kali ini saya akan membagikan tutorial cara membuat page loader atau efek loading yang di gunakan pada template arlina design, page loader ini mirip seperti Membuat Efek Loading Bar Seperti Di Youtube yang sudah saya bagikan pada tutorial sebelumnya.

Page loader ini akan muncul sebelum halaman blog terbuka, efeknya page loader ini memunculkan berbagai warna yang berganti dan melebar keluar secara horizontal.

Nah jika anda tertarik menambahkan efek ini, berikut adalah langkah-langkahnya:

Membuat Page Loader Arlina


Langkah awal letakan kode CSS berikut diatas </style>

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

Selanjutnya letakan JavaScript berikut diatas </body>

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

Kemudian letakan Kode berikut di diantara tag <body> dan </body> (tempatkan sesuai keinginan anda)

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

Simpan template.

Jika anda masih bingung peletakan kode HTML diatas anda bisa melihat kode diatas yang saya letakan tepat dibawah Navigasi menu berikut:

<nav id='navigation-hype' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'><i aria-hidden='true' class='fa fa-align-left'/> Menu</input>
<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'/>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Info%20Ikan' itemprop='url'><span itemprop='name'>Info Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Jenis%20Ikan' itemprop='url'><span itemprop='name'>Jenis Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Pakan' itemprop='url'><span itemprop='name'>Pakan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Akuarium' itemprop='url'><span itemprop='name'>Akuarium</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Budidaya%20Ikan' itemprop='url'><span itemprop='name'>Budidaya Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Wisata%20Air' itemprop='url'><span itemprop='name'>Wisata Air</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Tips%20Trik' itemprop='url'><span itemprop='name'>Tips Trik</span></a></li>
</ul>
</div>
</nav>


Demikian Cara membuat Page loader ala Arlina Design, semoga dapat menjadi bahan inspirasi untuk anda.
Advertisement
Advertisement

Artikel Terkait

CEO sekaligus Content Specialist di trikricky.com. Jangan lupa bahagia.