Nah, kembali lagi efek loading blog, pada waktu yang lalu juga sudah dibagikan efek loading pulse loading animation, dan kesempatan ini saya akan membagikan efek loading yaitu evil loader. Karena ketika membagikan demo widget pemutar musik saya menambahkan efek loading ini jadi sekarang adalah bagaimana cara membuatnya.

Untuk tampilannya adalah seperti gambar dibawah ini, atau lihat saja demonya untuk lebih jelasnya lagi, siapa tahu ada diantara kamu yang tertarik ingin membuatnya juga.

Membuat Effect Loading Blog: Evil Loader
Evil Loader

Loading Page: Evil Loader

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>
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
#load-page-seocips { width:100%; height:100%; position:fixed; left:0; top:0; z-index:999999; overflow:hidden; text-align:center; background:#111;}
.mata { width:20px; height:8px; background-color:#eee; border-radius:0 0 20px 20px; position:relative; top:40px; left:10px; box-shadow:40px 0 0 0 #eee;}
.kepala { -webkit-backface-visibility:hidden; position:relative; margin:-250px auto; width:80px; height:80px; background-color:#111; border-radius:50px; box-shadow:inset -4px 2px 0 0 #eee; -webkit-animation:node 1.5s infinite alternate; -webkit-animation-timing-function:ease-out; }
.badan { position:relative; margin:90px auto; width:140px; height:120px; background-color:#111; border-radius:50px/25px; box-shadow:inset -5px 2px 0 0 #eee; -webkit-animation:node2 1.5s infinite alternate; -webkit-animation-timing-function:ease-out; }
@-webkit-keyframes node {0% { top:0; } 50% { top:10px; } 100% { top:0; } }
@-webkit-keyframes node2 {0% { top:-5px; } 50% { top:10px; } 100% { top:-5px; } }
.circ { -webkit-backface-visibility:hidden; margin:60px auto; width:180px; height:180px; background-color:#111; border-radius:0 0 50px 50px; position:relative; z-index:-1; left:0%; top:20%; overflow:hidden; }
.tangan { -webkit-backface-visibility:hidden; margin-top:140px; width:120px; height:120px; position:absolute; background-color:#111; border-radius:20px; box-shadow:-1px -4px 0 0 #eee; -webkit-transform:rotate(45deg); top:75%; left:16%; z-index:1; -webkit-animation:node2 1.5s infinite alternate; -webkit-animation-timing-function:ease-out; }
.tulisan { position:absolute; width:100px; height:20px; margin:-10px auto; -webkit-font-smoothing:antialiased; font-family:'Julius Sans One',sans-serif; font-size:30px; font-weight:400; color:#eee; left:10%; top:5%; }
</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="circ">
  <div class="tulisan">Loading...</div>
  <div class="tangan"></div>
  <div class="badan"></div>
  <div class="kepala">
    <div class="mata"></div>
  </div>
</div>
</div>
5. Save template dan selesai.

4 Komentar untuk "Membuat Effect Loading Page: Evil Loader"

hahaha, kreatif bgt mas, selalu update mas !!

kalau gambar nya di ganti bis a ndak mas ?

Gak bisa mas, soalnya itu bukan pakai gambar :)