Loading Page Blogger. Kesempatan ini kembali "lagi" saya akan membagikan efek loading blog. Mungkin saja sobat sudah bosan dengan efek-efek loading yang sudah dibagikan sebelumnya dan ingin menggantinya dengan yang baru, nah efek loading yang baru ini lumayan keren dan bisa kamu pasang di Blog Blogger kamu.

Sebelumnya seocips sudah membagikan Evil loading Blog dan Pulse loading animation, untuk menambah koleksi efek loading Blog, berikut adalah Juggling Loader Animation. Tampilannya kamu dapat melihat gambar di bawah ini dan untuk animasinya kamu dapat melihatnya langsung pada demo dibawah.

Juggling Loader Animation for Blogger
Juggling Loader

Juggling Loader Animation

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.11.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 { 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; }
.circle{animation:spin 3s linear infinite both; background:#bada55; border-radius:100vmax; /* margin:calc(50vh - 5vmin) calc(50vw - 1vmin); */
/* Half the longest viewport width minus half the width/height of the circle. */
  margin:60vh calc(50vw - 1vmin); height:10vmin; position:absolute; width:10vmin}
.circle + .circle { animation:spin 3s linear 1s infinite both; background:#10aded; }
.circle + .circle + .circle { animation:spin 3s linear 2s infinite both; background:#a991e5; }
@keyframes spin {
    0% { transform:rotate(360deg) translate(0vmax,-10vmax); } 50% { transform:rotate(180deg) translate(0vmax,0vmax); } 100% { transform:rotate(0deg) translate(0vmax,-10vmax); }
}
</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">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
</div>
5. Save template dan selesai.


Bagaimana? keren gak? jika belum puas kamu dapat mengganti dengan efek loading blog yang lain, silahkan cek di label "Loading" untuk melihat animasi loading blog yang lain.
2 Komentar untuk "Effect Loading Blog : Juggling Loader Animation"

Sangat bermanfaat sekali gan... pengunjung ketika menunggu jadi merasa nyaman...