Blog

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

10 Comment(s)

  1. Yudis Tira
    April 10, 2016

    keren gan
    ijin coba 😀

  2. Reza rizqi12
    April 10, 2016

    maaf mas, saya belum ngerti, masih newbie, itu CSSnya copy semua atau bagaimana ? terima kasih sebelumnya

  3. Muhammad 'Keyzee' Anggi
    April 10, 2016

    jadi pengen masang nih gan,tapi ane ijin nyimak dulu yaa disini 😀 izin ctrl+d

  4. Rendi Yosandri
    April 10, 2016

    makasiih mas bro infonya

  5. Septia Wulansari
    April 10, 2016

    bisa buat nih, makasih iya bisa simple 😀

  6. gilbert sirait
    December 12, 2016

    Mantaps Kecoa

  7. Hendro Agung
    December 12, 2016

    kereeeenn gan

  8. arya dzulkhifli
    December 12, 2016

    thanks min, penjelasanya tambahin

  9. taufiqur rohman
    December 12, 2016

    nice post gan

  10. Lukman xx
    December 12, 2016

    Nice Info Gan 🙂

Write a comment