Cara Memasang Effek Animasi Loader Berwarna Seperti di Blog Arlinadzgn

Jika kalian pernah berkunjung ke blog atau situs Arlina Design (arlinadzgn.com) apabila diperhatikan pada bagian di bawah headernya terdapat animasi efek loader warna-warni yang berjalan sesuai lama loading blognya. Animasi loader tersebut pun menjadi perhatian pengunjung ketika menunggu loading sebuah halaman, termasuk saya sendiri ketika berkunjung ke blog tersebut.

Setelah penasaran dan tertarik ingin memasang animasi loader tersebut pada blog ini, akhirnya saya mencoba mencari struktur kode html CSS dan JavaScript dari animasi tersebut, akhirnya didapat juga kodenya. Dan sekarang animasi efek loader tersebut sudah terpasang di blog ini.

Untuk sobat yang ingin memasang animasi effek loader seperti pada blog arlinadzgn.com atau blog saya ini caranya cukup mudah, simak baik-baik langkah-langkah berikut ini.

contoh efek animasi loader loading pada blog

Memasang Efek Animasi Loader di Blog



Pertama
Masuk ke Blogger > Tema > Edit HTML

Kedua
Salin kode CSS di bawah ini, kemudian letakkan tepat di bawah kode </style>. Gunakan fungsi find atau CTRL + F untuk mempermudah pencarian kode.

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

Ketiga
Selanjutnya, salin kode JavaScript di bawah ini kemudian letakkan sebelum kode penutup </body>


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

Keempat
Letakkan kode JavaScript berikut ini di bawah header atau dimanapun dibagian yang sobat tambahkan efek loader berwarna muncul.

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

pemasangan kode efek loader pada blog di bawah header

Kelima
Simpan Tema / Template

Sekrang animasi efek loader warna-warni sudah terpasang di blog sobat, silahkan tes dengan mengakses halaman depan blog.

Kurang lebih seperti itu cara memasang efek loader berwarna seperti efek yang terdapat pada blog Arlina Design. Selamat mencoba dan semoga bermanfaat.
Postingan terkait
Komentar