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, daripada pengunjung jadi bosan menunggu element2 yang di load satu persatu, sebagi gantinya kamu bisa menambahkan "Pulse loading animation".

Sebelumnya juga seocips.com sudah membagikan efek loading yang tidak kalah menarik, seperti: Bounce loading Animation dan Delay loading Animation. Ok, tampilan loading ini adalah seperti gambar di bawah ini, untuk lebih jelasnya kamu dapat melihat demonya.

Pulse Loading Animation

Pulse Loading Animation

Berikut ini dalah langkah-langkah pemasangan efek pulse loading animation di Blogger 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.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.

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.
4 Komentar untuk "Efek Loading Blog: Pulse Loading Animation"

wah bagus nih efek loading ny...coba dulu ah...izin ya mas ...salam hangat :)

Thanks mas, salam hangat juga :)

Apa nggak memberatkan blog nantinya gan?

Gak tahu gan. Efek loading memang lebih cocok untuk blog yang lumayan berat di load, jika blognya ringan di load efeknya akan kelihatan tapi sekilas saja. Efek ini hanya menutupi blog ketika element-element sedang di load, dan akan hilang ketika semua element selesai di load.