Effect Loading Blog : Juggling Loader Animation
Ditulis oleh: Ditulis pada: April 15, 2022
 |
| Juggling Loader |
Juggling Loader Animation
1. Di Blog Blogger
2. Pilih menu template > Edit HTML
3. Letakan kode dibawah ini diatas
<script src=’https://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
<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.
