Membuat animasi loading menggunakan css3

Assalamualaikum wr.wb .

udah lama saya tidak posting di blog ini karena masih sibuk dengan dunia nyata saya .
pada postingan ini saya akan mencoba memberikan tutorial mengenai membuat animasi loading menggunakan css3.

jangan dibilang sulit membuat animasi loading menggunakan html dan css3 .
karena ini hanya sebuah dasar saja .
kita main di animasi css3 .

dasar htlmnya begini
</style>
<div class="loader">
<span></span>
<span></span>
<span></span>

</div>

Kemudian di kasih sebuah css untuk membentuk sebuah bulatan .

.loader {
text-algin:center;
}
.loader span {
height:40px;
width:40px;
display: inline-block;
margin:0px auto;
border-radius:50%;
background-color:#000;
}

untuk membuat animasi kita menggunakan @keyframes

ok kita coba gunakan sebuah animasi menggunakan css3 .
langsung saja simak code di bawah ini

@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 44px;
    height: 44px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 44px;
    height: 44px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    transform: translateY(0);
  }
  100% {
    width: 44px;
    height: 44px;
    opacity: 0.1;
    transform: translateY(-21px);
  }
}









ok setelah itu tambahkan pada css yang .loader tadi seperti ini .

    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
terus tambahkan lagi css seperti ini untuk membuat sebuah delay pada sebuah animasi supaya gerakannya teratur dan tidak bertabrakan

.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
jadi intinya css di atas membuat jarak atau waktu pada bagian <span> yang keberapa
contoh nth-of-type(3) artinya itu tag <span> yang ke tiga akan bergerak dalam waktu 0.6second

Hasil semua script di atas .

bisa anda lihat