Animasi Loading Memantul Master Jin

ILUSTRASI

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 :)