Assalamualaikum kawan tangituru.com bagaimana kabar kalian hari ini ? semoga baik2 saja yah biar bisa mengikuti artikel dari admin :V

kali ini admin ingin memberikan sedikit snippet code untuk membuat animasi loading sebelum halaman di buka seperti di halaman pertama kali framework CermaiJS .

ok langsung saja pertama kita buat dulu file cssnya , contoh admin memberikan nama cLoading.css kemudian berikan code seperti ini

.loading {
  width : 10em;
  height : 10em;
  border-radius : 50%;
  border-right : 0.5em solid#F80;
  border-left : 0.5em solid#089;
  border-top : 0.5em solid#F80;
  border-bottom : 0.5em solid#089;
  margin-top : 10em;
}

setelah membentuk sebuah lingkaran sekarang kita buat animasi berputar pada lingkaran tersebut .

@keyframes spin {
 from {
   transform : rotate(360deg);
 }
 to {
   transform : rotate(0deg);
 }
}
@-webkit-keyframes spin {
 from {
  transform : rotate(360deg);
 }
 to {
  transform : rotate(0deg);
 }
}
@-moz-keyframes spin {
 from {
  transform : rotate(360deg);
 }
 to {
  transform : rotate(0deg);
 }
}

nah sekarang animasi nya sudah di buat tinggal tambah kan animasinya pada class .loading tadi

-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
 animation:spin 1s linear infinite;

nah sekian dulu yah tutorial yang bisa admin berikan untuk hari ini . jangan lupa kunjungi kembali Tangituru.com yah
OK . wassalamualaikum wr.wb