Membuat Loading Menarik Dengan Menggunakan CSS

Di panduan kali ini sahabat akan belajar cara membangun loading menarik dengan menggunakan css ,

 

hallo semuanya kembali lagi di artikel Source Code Aplikasi kali ini saya akan memberikan panduan bagaimana cara membangun loading menarik dengan menggunakan css.

 

di panduan ini saya hanya mengandalkan HTML dan CSS tanpa pemakaian jquery apapun , karenanya 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 , karenanya hasilnya akan seperti ini :

di gambar ini hanya menunjukan wujud loadinya saja , karena pergerakan loadingnya dinamis sehingga tak dapat di tankap oleh gambar, bagi mengeceknya silahkan jalankan di browsernya dan lihat seperti apa animasi dari loadingnya.

 

oke hingga di sini dulu bagi panduan membangun loading menarik dengan menggunakan css, hingga bertemu di artikel berikutnya 🙂

Sumber https://kursuswebsite.org