Cara Membuat Effect Loading : Evil Loader

Hai Sobat, kali ini saya akan share " Cara Membuat Effect Loading : Evil Loader ". Cara ini cocok bagi anda yang bosan dengan effect loading yang lama.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Effect Loading : Evil Loader

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode </head> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src="https://googledrive.com/host/0B27rDaMQa46YWm14V2hOaGY2NEU" type="text/javascript"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
#load-page-cak-yit { 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>

Anda Dapat Menghapus Kode Yang Di Cetak Tebal Tersebut Jika Template Anda Sudah Terpasang jQuery
4. Cari Kode <body> Letakkan Kode Di Bawah Ini D Bawah Kode <body>

<div id="load-page-cak-yit">
<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. Klik Simpan

Tag : CSS, Effect Loading

Cara Membuat Effect Loading : Evil Loader

Cara Membuat Effect Loading : Evil Loader

Previous

Next

2 Komentar untuk "Cara Membuat Effect Loading : Evil Loader"