Cara Membuat Animasi Loading Blog

300 views

alhadi.org – Cara Membuat Animasi Loading Blog, Cara Membuat Animasi Loading Blog

Cara Membuat Animasi Loading Blog

Cara Membuat Animasi Loading Blog – Animasi loading blog ini bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat. Kalau loading blog sobat lagi cepat, mungkin tidak masalah bagi pengunjung, tapi kalau lagi lambat, pengunjung pasti akan bosan melihat tampilan putih dan beberapa gambar yang belum sempurna terload, alhasil pengunjung bisa kabur ke blog yang lain. Dengan menggunakan efek ini, pengunjung blog sobat akan sedikit terhibur ketika menunggu loading blog sobat, karena loading blog sobat memiliki efek animasi yang cukup unik.

Bagaimana cara membuatnya ? Ikuti langkah-langkah berikut :

Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Kemudian Tambahkan JQuery ini diatas , disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template sobat )

Langkah terakhir, pasang Script dibawah ini diatas tag
 





Script by : hompimpaalaihumgambreng.blogspot.com
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Animasi Loading Blog, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Animasi Loading Blog berguna untuk anda.