Berbagi efek loading blog lagi, kali ini Pulse Loading Animation

Pulse Loading Animation. Kamu dapat menambahkan efek loading page pada blog kamu, dengan menambahkan efek loading. Setiap pengunjung yang berpindah halaman akan melihat animasi loading yang kamu pasang.

Mungkin saja halaman blog kamu cukup berat untuk di muat, dari pada pengunjung jadi bosan menunggu element2 yang di load satu persatu, sebagai gantinya kamu bisa menambahkan "Pulse loading animation" ini.  Ok, tampilan loading ini adalah seperti gambar di bawah ini, untuk lebih jelasnya kamu dapat melihat demonya.

Pulse Loading Animation


Pulse Loading Animation



Cara memasang Pulse Loading Animation di Blogger


1. Di Blog Bloger 😃
2. Pilih menu Template ➔ Edit HTML
Berbagi efek loading blog lagi, kali ini Pulse Loading Animation
Template - Edit HTML

3. Letakan kode dibawah ini diatas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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 { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
    25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
Note:
  • Jika pada template sudah terpasang Jquery (warna merah) diatas, maka kode itu tidak usah dipasang lagi, atau ganti dengan Jquery versi terbaru.
  • Jika tidak bisa di save, hapus kode penutup </script> di kode diatas.
4. Letakan kode dibawah ini dibawah <body>
<div id="load-page-seocips">
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
5. Save template dan selesai.
Join This Site