Membuat Loading Menarik Dengan Menggunakan CSS

Pada tutorial kali ini anda akan belajar cara membuat loading menarik dengan menggunakan css ,

hallo semuanya kembali lagi di artikel dumet school kali ini saya akan memberikan tutorial bagaimana cara membuat loading menarik dengan menggunakan css.

pada tutorial ini saya hanya mengandalkan HTML dan CSS tanpa penggunaan jquery apapun , maka silahkan di simak tutorialnya :

pertama-tama salinlah HTML nya :

<div class="loader">Loading...</div>

setelah di salin silahkan berlanjut salin css nya :

 .loader,
.loader:before,
.loader:after {
  background: #00ffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #00ffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

setelah di salin silahkan di jalankan , maka hasilnya akan seperti ini :

pada gambar ini hanya menunjukan bentuk loadinya saja , karena pergerakan loadingnya dinamis sehingga tidak bisa di tankap oleh gambar, untuk mengeceknya silahkan jalankan pada browsernya dan lihat seperti apa animasi dari loadingnya.

oke sampai di sini dulu untuk tutorial membuat loading menarik dengan menggunakan css, sampai bertemu pada artikel selanjutnya 🙂