Dari sekian Master Jin lihat, telah banyak yang membuat kreasi Loading Blog yang bermacam-macam. Entah memanfaatkan dengan gambar atau CSS. Tapi, baiklah kali ini saya akan share juga kreasi Animasi Loading Memantul ala Master Jin.
Cukup banyak menggunakan CSS, tapi silahkan sobat meletakkannya di bawah
<body>
. Semoga dengan itu, akan sedikit membantu meringankan Loading aslinya. Jika sobat ingin merasakan loading yang lebih fast coba dengan meng-upload CSSnya. Berikut tutorial Animasi Loading Berputar Master Jin.Letakkan tepat di atas
]]></b:skin>
#screen {
z-index:999999;
background:#000;
width:100%;
height:100%;
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
text-shadow:none;
}
.bola-mj {
text-align:center;
width:100px;
height:63px;
margin:10% auto;
}
.bola-mj span {
display:inline-block;
vertical-align:middle;
width:13px;
height:13px;
margin:31px auto;
background:#ddd;
-moz-border-radius:63px;
-moz-animation:bola 0.4s infinite alternate;
-webkit-border-radius:63px;
-webkit-animation:bola 0.4s infinite alternate;
-ms-border-radius:63px;
-ms-animation:bola 0.4s infinite alternate;
-o-border-radius:63px;
-o-animation:bola 0.4s infinite alternate;
border-radius:63px;
animation:bola 0.4s infinite alternate;
}
#bola_1 {
-moz-animation-delay:0s;
-webkit-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
#bola_2 {
-moz-animation-delay:0.15s;
-webkit-animation-delay:0.15s;
-ms-animation-delay:0.15s;
-o-animation-delay:0.15s;
animation-delay:0.15s;
}
#bola_3 {
-moz-animation-delay:0.30s;
-webkit-animation-delay:0.30s;
-ms-animation-delay:0.30s;
-o-animation-delay:0.30s;
animation-delay:0.30s;
}
@-moz-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-moz-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-moz-transform:translateY(-26px);
}
}
@-webkit-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-webkit-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-webkit-transform:translateY(-26px);
}
}
@-ms-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-ms-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-ms-transform:translateY(-26px);
}
}
@-o-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-o-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-o-transform:translateY(-26px);
}
}
@keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold
transform:translateY(-26px);
}
}
Lalu, letakkan kode berikut dibawah kode
<body>
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='screen'>
<div class="bola-mj">
<span id="bola_1">
</span>
<span id="bola_2">
</span>
<span id="bola_3">
</span>
</div>
</div>
Silahkan pada warna atau animation bisa di edit sesuai selera sobat. Selamat mencoba :)
50 comments
Mas Jin emang jagonya deh ... :D
X ✓ahahaa...gak juga
X ✓merendah nih master jin
X ✓animasinya asyik, mantul-mantullan gitu. ^_^
X ✓Mas, kalau Urlnya, ada nggak ?
X ✓Jagonya memang, :D
X ✓hehe..
X ✓ah endak deh Mas :>)
X ✓ajib kan ?? hehe
X ✓URL apa Mas ??
X ✓Url gambar mantul2 nya Mas. saya tertarik menggunakannya :D
X ✓Kreatif sama pinter banget sih mas :)
X ✓wahhh cakep nih... keren dah pokonya... (h)
X ✓itu pake CSS semua Mas.. gak pake gambar
X ✓ahaha cuman iseng aja Mas..
X ✓makasih kang Abdul..
X ✓pengen coba ach :D
X ✓wah keren nih mas
X ✓wah keren pokonya,,,,,
X ✓mantap mas..........
simple dan keren (h)
X ✓makasih Mas..
X ✓mangtab terus dah..hehe
X ✓(o)
X ✓oke, silahkan Mas Imron :)
X ✓nitip ya http://androitan.blogspot.com/
X ✓boleh-boleh saja ckckck :D
X ✓nitip bakso Mas ?? hehe
X ✓Blognya keren sekali mas, oh iya mau tanya mas, kalo di blog saya ini kok animasi css nggak jalan yah?, bisa tolong dicekin?
X ✓http://dharla-perdana.blogspot.com/2013/08/komentar.html
Keren juga animasinya :D
X ✓oh iya mas jin, kemaren ane pernah tanya cara membuat homepage cuma nampil judul post dan komentar saja, setelah ane praktek alhamdulillah berhasil nampilkan judul postnya saja. Tapi nampilkan jumlah komentarnya ane masih bingung mas. Kode apa lagi yang perlu ditambah mas terus mau diletakkan dibagian mana? Tq sebelumnya mas
hadeww ,, itu kan nitip cucian ? :v wkwkwkwk
X ✓dengan animasi loading akan tampak lebih cantik. terimaksih atas sharingnya.
X ✓wkwkwk :D
X ✓di template sobat terdapat kode ini : <span class="hanyajudul">..</span>
X ✓letakkan kode ini disampingnya : <span><data:post.numComments/></span>
tapi ane gak cantik Mas..ahahaa
X ✓sebenernya keren tuhh animasinya tp template saya udah berat..bro hahahay..
X ✓ahaha..dibuat ringan dong bro
X ✓maksudnya animasi pada apanya Mas ?
X ✓Bagaimana cara membuat ringan blog...???
X ✓disable .js dan valid CSS3 sudah cukup Mas..
X ✓Jiaaaaaah, keren sangat :D nnti pake ahhhh :D
X ✓Itu warna bola2nya bisa diganti kan mas?
bisa sangat Mas.. :-d
X ✓aku komen apa yaa ???
X ✓apa hayooo ;)
X ✓wah keren nie mantul2
X ✓Kebetulan aku belum pake animasi loading seperti ini, izin coba master...! dan salam kenal.
X ✓hehe ^_^
X ✓silahkan mas..hehe salam kenal balik
X ✓haha... jadi unik tuh loadingnya klo dipsang
X ✓prookk prookkk prookkk hebatt bgt dahh
X ✓5 jempol buat master (y)
1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar
Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"
KONVERSI KODEEMOTICON