✔ Cara Memasang Effek Animasi Loader Berwarna Menyerupai Di Blog Arlinadzgn

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

Setelah ingin tau dan tertarik ingin memasang animasi loader tersebut pada blog ini, hasilnya aku mencoba mencari struktur arahan html CSS dan JavaScript dari animasi tersebut, hasilnya didapat juga kodenya. Dan kini animasi efek loader tersebut sudah terpasang di blog ini.

Untuk sahabat yang ingin memasang animasi effek loader menyerupai pada blog arlinadzgn.com atau blog aku ini caranya cukup mudah, simak baik-baik langkah-langkah berikut ini.

contoh efek animasi loader loading pada blog

Cara menciptakan effek animasi loader berwarna menyerupai di blog arlinadzgn.com

Pertama
Masuk ke Blogger > Tema > Edit HTML

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

/* 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 arahan JavaScript di bawah ini lalu letakkan sebelum arahan epilog </body>

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

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

<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 arahan 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 menyerupai itu cara memasang efek loader berwarna menyerupai efek yang terdapat pada blog Arlina Design. Selamat mencoba dan biar bermanfaat.
Sumber http://www.randi.id

Share this post

Berlangganan update artikel terbaru via email: