.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Thursday, September 12, 2013
Animasi Loading Berputar Master Jin


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

deleteX

merendah nih master jin

deleteX

animasinya asyik, mantul-mantullan gitu. ^_^

deleteX

Mas, kalau Urlnya, ada nggak ?

deleteX

Url gambar mantul2 nya Mas. saya tertarik menggunakannya :D

deleteX

Kreatif sama pinter banget sih mas :)

deleteX

wahhh cakep nih... keren dah pokonya... (h)

deleteX

itu pake CSS semua Mas.. gak pake gambar

deleteX

ahaha cuman iseng aja Mas..

deleteX

wah keren pokonya,,,,,
mantap mas..........

deleteX

mangtab terus dah..hehe

deleteX

oke, silahkan Mas Imron :)

deleteX

nitip ya http://androitan.blogspot.com/

deleteX

boleh-boleh saja ckckck :D

deleteX

nitip bakso Mas ?? hehe

deleteX

Blognya keren sekali mas, oh iya mau tanya mas, kalo di blog saya ini kok animasi css nggak jalan yah?, bisa tolong dicekin?

http://dharla-perdana.blogspot.com/2013/08/komentar.html

deleteX

Keren juga animasinya :D

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

deleteX

hadeww ,, itu kan nitip cucian ? :v wkwkwkwk

deleteX

dengan animasi loading akan tampak lebih cantik. terimaksih atas sharingnya.

deleteX
This comment has been removed by the author.

di template sobat terdapat kode ini : <span class="hanyajudul">..</span>
letakkan kode ini disampingnya : <span><data:post.numComments/></span>

deleteX

tapi ane gak cantik Mas..ahahaa

deleteX

sebenernya keren tuhh animasinya tp template saya udah berat..bro hahahay..

deleteX

ahaha..dibuat ringan dong bro

deleteX

maksudnya animasi pada apanya Mas ?

deleteX

Bagaimana cara membuat ringan blog...???

deleteX

disable .js dan valid CSS3 sudah cukup Mas..

deleteX

Jiaaaaaah, keren sangat :D nnti pake ahhhh :D
Itu warna bola2nya bisa diganti kan mas?

deleteX

bisa sangat Mas.. :-d

deleteX

aku komen apa yaa ???

deleteX

wah keren nie mantul2

deleteX

Kebetulan aku belum pake animasi loading seperti ini, izin coba master...! dan salam kenal.

deleteX

silahkan mas..hehe salam kenal balik

deleteX

haha... jadi unik tuh loadingnya klo dipsang

deleteX

prookk prookkk prookkk hebatt bgt dahh
5 jempol buat master (y)

deleteX
Catatan :
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
 
Back to Top