Cara Mudah Membuat Efek Loader Warna - Warni

Cara Mudah Membuat Efek Loader Warna - Warni

Ariefchrome - Hallo sahabat Ariefchrome pada kesempatan kali ini saya akan membagikan sebuah artikel yang berjudul Cara Mudah Membuat Efek Loader Warna - Warni. Apakah kalian tahu yang dimaksud dengan Loader? Apakah kalian Pernah Mencoba Membuatnya? bagi yang sudah pernah membuatnya silahkan nati comment ya siapa tau efek loader yang kalian buat berbeda dengan saya dan nantinya kita saling share efek loader blog kita masing masing. Kemudian bagi yan belum silahkan anda baca terlebih dahulu pengertian Efek Loader. 

Pengertian Efek Loader

Efek Loader merupakan sebuah efek yang biasanya seperti animasi yang nantinya akan muncul pada saat blog anda tengah melakukan sebuah proses dari perintah dalam proses  sedang melakukan transfer data atau yang disebut dengan Loading.

Fungsi Efek Loader

- Untuk Mempercantik Blog

- Tanda di Tampilan Blog, Bahwa blog tersebut sedang dalam Proses atau Loading

Efek Loader Warna-Warni ini biasanya dibuat dengan menggunkan script css dan tambahan dari Javascript lalu nanti bisa kita simpan dibawah Header  atau mungkin bisa dimana saja.

Cara Membuat Efek Loader Warna - Warni

Langkah 1 : Silahkan anda buka Dashboard blogger anda.

Langkah 2 : Masuk pada Tema/Templates Kemudian Edit HTML.

Langkah 3 : Kemudian anda Cari Kode ]]></bskin>.

Langkah 4 : Masukkan Kode Dibawah ini Sebelum Kode ]]></bskin>.

 /* Ariefchrome 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 5 : Masukkan Kode dibawah ini sebeku kode </body>

<script type='text/javascript'>

//<![CDATA[

// Page Loader

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

//]]>

</script>

Langkah 6 : Kemudian silahkan anda masukkan kode dibawah tepat dimana anda ingin memunculkan efek Loading Warna - Warni ini. disini saya menempatkannya di bawah script Menubar.

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

Langkah 6 : silahkan anda simpan.

jika anda ingin memastikan bahwa efek loadernya berjalan dengan lancar, silahkan anda buka website /blog anda.

PENUTUP

Ariefchrome - Sekian artikel saya tentang bagaimana Cara Mudah Membuat Efek Loader Warna - Warni. semoga bermanfaat dan terimakasih

Share This :