Membuat Efek Loading Saat Halaman Dimuat Seperti Arlina Design

Description: Cara Membuat Efek Loading Sederhana Saat Halaman Dimuat Seperti Arlina Design ~ Banyak yang request kepada saya tentang bagaimana cara membuat loading sederhana saat halaman utama dimuat seperti yang diterapkan pada blog Arlina Design. Tutorial yang bisa saya berikan tidak sama seperti loading yang berada pada blog Mbak Arlina, jadi kalau tutorial ini acak-acakan Anda bisa mengedit sesuai dengan keinginan Anda.

Untuk menerapkan efek loading ini tidak begitu susah atau tidak rumit jika Anda mengikuti tutorialnya dengan baik dan benar sesuai tutorial yang saya berikan. Berikut ini adalah tutorial pemasangannya, Disimak ya gan :D jangan lupa untuk dishare ke teman-teman mu.

Membuat Efek Loading Saat Halaman Dimuat Seperti Alina Design

Langkah pertama :
Login ke Blogger > Template > Edit HTML. Masukkan kode dibawah ini diatas ]]></b:skin>

/* Lostcips 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 :
Masukkan kode dibawah ini diatas </body>

<script type='text/javascript'>

//<![CDATA[

// Lostcips Page Loader

$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});

//]]>

</script>

Langkah ketiga :
Langkah selanjutnya adalah memasang efek loading dimanakah yang akan Anda pasang, berikut ini adalah kode untuk menerapkan efek loading di blog

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

- Sebernya tutorial yang saya berikan ini untuk memperbagus tampilan blog kita
- Maaf kepada Mbak Arlina, karna tutorialnya saya publish terlebih dahulu tanpa seizin Mbak Langkah

Terakhir adalah Save. Jika terjadi error mungkin Anda kurang teliti mengikuti tutorial yang saya berikan ini, jika terjadi error atau mau menanya-nanya, Anda bisa comment dibawah atau chat kami lewat Fanpage (Lostcips Official). Terimakasih telah berkunjung semoga bermanfaat bagi kalian semua, jangan lupa Like dan Share untuk berkembangnya blog ini, terimakasih.