Loading Page Bounce Effect. Masih tentang efek loading page di Blogspot, kemarin saya sudah membagikan efek loading page Delay Animation nah kali ini saya akan membagikan loading page Bounce animation, animasi ini dibuat dengan CSS keyframe.

Membuat Efek Loading Page Bounce Animation di Blogspot

Membuat efek loading di Blog

1. Di Blog Blogger
2. Pilih menu template > Edit HTML
3. Letakan kode dibawah ini diatas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>
<style>
#load-page-seocips { background-color:#00CCFF; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; }
.dots-container { padding:0; position:absolute; text-align:center; top:50%; width:100%; }
.dots { -webkit-animation:bounce 1.5s infinite linear; animation:bounce 1.5s infinite linear; background:#FFF; border-radius:50%; display:inline-block; height:20px; text-align:center; width:20px; }
.dots:nth-child(1) { -webkit-animation-delay:.2s; animation-delay:.2s; }
.dots:nth-child(2) { -webkit-animation-delay:.4s; animation-delay:.4s; }
.dots:nth-child(3) { -webkit-animation-delay:.6s; animation-delay:.6s; }
.dots:nth-child(4) { -webkit-animation-delay:.8s; animation-delay:.8s; }
.dots:nth-child(5) { -webkit-animation-delay:1s; animation-delay:1s; }
@-webkit-keyframes bounce {
    0% { -webkit-transform:translateY(0); } 15% { -webkit-transform:translateY(-15px); } 30% { -webkit-transform:translateY(0); }
}
@keyframes bounce {
    0% { transform:translateY(0); } 15% { transform:translateY(-15px); } 30% { transform:translateY(0); }
}
</style>
Note:
Jika tidak bisa di save, hapus kode </script> di kode diatas.
4. Letakan kode dibawah ini dibawah <body>
<div id="load-page-seocips">
<div class="dots-container">
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
</div>
</div>
5. Save template dan selesai.

Bagaimana tampilannya? kamu bisa melihat demo dibawah ini:



Bagaimana? jika kamu belum puas dengan efek loading blog ini dan ingin efek loading yang lain, kamu dapat melihatnya di kumpulan efek loading blog. Sekian, terimakasih telah berkunjung.
2 Komentar untuk "Membuat Efek Loading Page Bounce Animation di Blogspot"

kak Admin .. Kalo mau nambahin Backgroun Di Atas Bounce nya Bisa Gak ? Mohon Respon nya :D