Membuat Loader Web Sederhana dengan CSS3

Ketika kita sedang browsing di internet dengan menggunakan browser apa saja sering kita temukan sebuah loader, seperti hal nya kita membuka gmail, sebelum semua konten web termuat semua maka akan muncul sebuah animasi yang menandakan bahwa proses pemuatan konten halaman web sedang berlangsung. pada tulisan ini saya akan mencoba membuat sebuah loader yang tentunya tidak akan seperti gmail, kita akan membuat sebuah animasi loader yang berputar. Sebelumnya kita harus mengetahui seperti apakah loader yang akan kita buat, contohnya bisa di lihat di sini. animasi loader ini kita tidak menggunakan gambar sama sekali, hanya menumpuk 3 buah elemen div, yang paling bawah div berbentuk lingkaran lebar 32px dan tinggi 32px dengan warna latar #3399FF atau hitam juga bisa dan border=0 , div yang di tengah masih berbentuk lingkaran lebar 48px dan tinggi 48px dengan warna latar belakang putih atau samakn dengan warna lAtar belakang body html, elemen div yang paling atas berbentuk persegi panjang dengan lebar 32px (sama dengan lebar div yang paling bawah) dan tinggi 4px. cara kerjanya adalah kita akan membuat elemen div yang paling atas yang berbentuk persegi panjang berputar dengan menggunakan script css3 sehingga seolah - olah keseluruhan loader tersebut berputar. berikut code css3 nya :

#ovaluar .hshape {
-webkit-animation-name:spin;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
-moz-animation-name:spin;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-duration:2s;
-o-animation-name:spin;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
-o-animation-duration:2s;
animation-name:spin;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-duration:2s;
}       
@-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}to {
-webkit-transform:rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform:rotate(0deg);
}to {
-moz-transform:rotate(360deg);
}
}
@-o-keyframes spin {
from {
-o-transform:rotate(0deg);
}to {
-o-transform:rotate(360deg);
}
}
@keyframes spin {
from {
transform:rotate(0deg);
}to {
transform:rotate(360deg);
}
}
#ovaluar {
height: 32px;
width: 32px;
background-color: #3399FF;
position:absolute;
z-index:0;
margin:auto;
bottom:0;
left:0;
top:0;
right:0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.ovaldlm {
height: 24px;
width: 24px;
background-color: #FFFFFF;
position:relative;
z-index:1;
top: 4px;
left: 4px;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
}
.hshape {
width:32px; 
height:4px;
background-color: #FFFFFF;
position: absolute;
z-index:3;
top: 14px; 
left: 0px;
}

dari kode css diatas dapat saya jelaskan bahwa elemen div dengan id #ovaluar merupakan elemen div yang paling bawah karena berisi z-index=0, elemen div dengan class ovaldlm berada di tengah, dan elemen div dengan class hshape adalah elemen yang berputar. sedangkan berikut kode html nya

cukup mudah bukan? hanya dengan beberapa kode kita bisa membuat loader website, terakhir mungkin kenapa saya membuat loader ini tidak menggunakan gambar gif yang bergerak? hal ini di lakukan karena bisa berjalan lebih cepat. tulisan saya selanjutnya kita akan menggabungkan loader ini dengan preloader website seperti contoh ini.