Simple Google Animation dengan CSS dan HTML

Siapa yang tidak tau google pasti semuanya tahu sebuah peerusahaan multinasional Amerika Serikat yang berkekhususan pada jasa dan produk yang berbasis internet. Produk-produk tersebut meliputi teknologi pencarian, perangkat lunak, dan periklanan. Sebagian besar labanya berasal dari AdWords. Google didirikan oleh Larry Page dan Sergey Brin saat masih mahasiswa Ph.D. di Universitas Stanford. Mereka berdua memegang 16 persen saham perusahaan. Pernyataan misinya adalah "mengumpulkan informasi dunia dan membuatnya dapat diakses dan bermanfaat oleh semua orang", dan slogan tidak resminya adalah "Don't be evil". Sejak didirikan, pertumbuhan perusahaan yang cepat telah menghasilkan berbagai produk, akuisisi, dan kerjasama di bidang mesin pencari inti Google. Perusahaan ini menawarkan perangkat lunak (dalam internet), termasuk surat elektronik , paket aplikasi perkantoran, dan jejaring sosial.

Kali ini saya tidak akan mebahas mengenai Googlenya tapi Membuat Loading sederhana dengan css dan html saja dan tentunya bisa anda kreasikan sendiri mau di apakan dan untuk apa loading ini.

Bisa dilihat di bawah ini untuk gambar loadingnya yang sangat simple dan keren tentunya

Bagi yang berminat langsung saja copy HTML

 <div class="loading">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
</div> 

Dan CSSnya di bawah ini

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}

.loading {
  position: relative;
}

.item {
  display: inline-block;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  animation: load-ball .5s ease-in-out infinite;
  animation-direction: alternate;
}

.item-1 {
  background: #3A8DF2;
  animation-delay: 0.1s;
}

.item-2 {
  background: #E14E39;
  animation-delay: 0.2s;
}

.item-3 {
  background: #FCC000;
  animation-delay: 0.3s;
}

.item-4 {
  background: #3AA05C;
  animation-delay: 0.4s;
}

@keyframes load-ball {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-13px);
  }
}
 

Ini hanyalah sebuah dasar pembuatan loading yang simple dan keren ala Google untuk kreasi selanjutnya bisa anda kreasikan sendiri. Silahkan berkomentar jika anda belum paham


Sumber : Bruno Almeida