Membuat efek loading page : Evil Loader
oke kembali dengan saya di berbagi tutorial kita akan membahas kembali tentang loading tapi kali ini ada yang berbeda kita membuat efek loading Evil loader kali ini saya akan membagikan efek loading....Evil Loader kelihatannya menarik langsung saja
1.loading page : Evil loader
- di Blog atau Blogger
- pilih menu tample > edit HTML
- letakan kode di bawah 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>
2.note
- jika blog sudah terpasang jquery (warna merah) diatas maka kode itu tidak usah di pasang lagi atau di ganti dengan jquery versi terbaru
- letakan kode di bawah 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>
save tample selesai rasakan sensasinya
Belum ada tanggapan untuk "Membuat efek loading page : Evil Loader"
Post a Comment