Membuat Animasi Loading Bubble Dengan Full Css

24 views

Salam jagocoding,, kali ini masih dengan CSS, aku mau share tutorial menciptakan animasi loading bubble hanya dengan CSS. Animasi loading bubble yang akan aku jelaskan kali ini tidak memerlukan gambar apapun, sehingga loading bubble ini sanggup diaplikasikan di website manapun dengan loading yang lebih cepat.

Untuk memulai ini, minimal kita punya sedikit pengetahuan dasar ihwal CSS 3  Animation. Karena sintaks yang akan digunakan kali ini nggak jauh-jauh dari sana.. Yuk pribadi disimak aja ya..

 

Supaya akhirnya lebih asik, mungkin ada baiknya kita mengerjakan tutorial ini di website yang sudah ada isinya saja.. Atau jika mau buat dari website kosongan, ya diisi-isi aja dulu deh dengan konten sembarangan.. Saya coba isi websitenya dulu dengan lorem ipsum.. 😛

<!--Di copy paste puluhan kali supaya website terlihat berisi--><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>

 

Langkah pertama, buat struktur HTML ibarat ini di pecahan paling atas konten (setelah body, sebelum isi website tadi):

<div class="overlay"><div class="loading"><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div></div></div>

Disini kita memakai 3 lapis layer, layer 1 : overlay sebagai penghitam layar, layer 2 : loading yang akan menampung bubble, dan  3 layer .bubble yang nantinya akan bergerak-gerak sesuai dengan animasi yang kita berikan.Sekarang pribadi ke CSSnya aja ya,,

 

Pertama-tama kita buat layer overlaynya dulu. Kita ingin menciptakan seluruh halaman website menjadi hitam transparan biarpun discroll hingga manapun. CSSnya ibarat ini:

/*CSS RESET*/*{margin:0px auto;}.overlay{position:fixed; /*supaya tetap membisu biarpun discroll*/background:rgba(0,0,0,.25); /*warna hitam transparan*/width:100%;height:100%;}

 Hasilnya nanti akan ibarat ini :

 

 

Setelah itu, kita atur posisi layer loading supaya sempurna di tengah-tengah layar. Karena posisi ini tidak mengalir, dan mau kita letakkan seenak jidat kita, kita pakai position:absolute; (Untuk memahami perbedaan jenis CSS position sanggup lihat tutorial di Tutorial Lengkap Memahami CSS Position). Pengaturan layoutnya ibarat ini :

.loading{position:absolute;width:100px;height:40px;/*supaya posisi loading iconnya nanti persis ada di tengah*/text-align:center;top:50%;left:50%;margin-top:-50px; /*min - setengah dari width*/margin-left:-20px; /*min - setengah dari height*/}

 Karena layer .loading belum diisi apa-apa, hasil sementaranya masih sama ibarat screenshot pertama.
Setelah itu kita gres mendesain layer .bubble. Membuat lingkaran dengan CSS sanggup dibantu dengan CSS3 Border-radius. Jangan lupa memakai display:inline-block; supaya bubble tersebut tetap mengalir ke samping, dan bukan ke bawah..

.bubble{display:inline-block;width:20px;height:20px;background:#f0f0f0;/*supaya bulat*/border-radius:50%;-moz-border-radius:50%;/*biar ada bayangan sedikit*/box-shadow:0px 0px 10px #777;-moz-box-shadow:0px 0px 10px #777;}

 Hasilnya nanti yakni 3 bubble yang persis di tengah halaman ibarat ini :  

 

Sampai disini, desain awal sudah selesai kita buat. kini kita menciptakan animasi supaya bubble tersebut membesar dan berubah warna secara bergiliran. Seperti biasa, dalam menciptakan animasi kita harus menciptakan dulu alur animasinya dengan @keyframe.

Disini aku akan menciptakan keyframe dengan 3 alur sederhana, yaitu posisi awal (0%), posisi dikala membesar dan berubah warna (50%), dan kembali ke awal (100%). Alurnya sanggup dikembangkan lebih banyak lagi, asalkan posisi awal 0% dan 100% menghasilkan nilai yang persis sama, supaya bubble sanggup bergerak mulus secara berulang-ulang.

@keyframes gerak{0% {width:20px; height:20px;}50% {width:30px; height:30px; background:#0cf;} /*bubble membesar dan berubah warna*/100% {width:20px; height:20px;} /*Kembali ke posisi awal*/}/*JANGAN LUPA PREFIX BUAT BROWSER-BROWSER JADUL*/@-webkit-keyframes gerak{0% {width:20px; height:20px;}50% {width:30px; height:30px; background:#0cf;}100% {width:20px; height:20px;}}@-moz-keyframes gerak{0% {width:20px; height:20px;}50% {width:30px; height:30px; background:#0cf;}100% {width:20px; height:20px;}}@-o-keyframes gerak{0% {width:20px; height:20px;}50% {width:30px; height:30px; background:#0cf;}100% {width:20px; height:20px;}}@-ms-keyframes gerak{0% {width:20px; height:20px;}50% {width:30px; height:30px; background:#0cf;}100% {width:20px; height:20px;}}

Setelah prefix selesai dibuat, kini tinggal kita panggil dengan CSS Animation pada layer .bubble yang tadi. Karena ini masih CSS3, jangan lupa juga ya memberi prefix -moz-, -o-, -webkit-, dan -ms-.. 😀

.bubble{display:inline-block;width:20px;height:20px;border-radius:50%;-moz-border-radius:50%;background:#f0f0f0;box-shadow:0px 0px 10px #777;-moz-box-shadow:0px 0px 10px #777;
animation:gerak 2.5s infinite;-webkit-animation:gerak 2.5s infinite;-o-animation:gerak 2.5s infinite;-moz-animation:gerak 2.5s infinite;-ms-animation:gerak 2.5s infinite;}

Nah, hingga disini sudah hampir selesai lho.. Kalau dijalankan, animasinya sudah mau berjalan sih,, tapi masih berjalan berbarengan.. Liat disini deh : http://googledrive.com/host/0BxJr5IwDY6kEa0F3OFN2b1FjU0U/demo1.html. Sekarang kita kasih trik pelengkap supaya bubblenya sanggup bergerak bergantian satu dengan yang lainnya. Disini kita membutuhkan santunan pseudo class :first-child, last-child, dan CSS3 animation-delay.

Animation Delay ini berfungsi untuk menunda mulainya animasi selama jeda waktu tertentu. Saya akan memperlihatkan delay 0 detik pada bubble pertama (first-child), kemudian memperlihatkan delay selama 0.5 detik pada bubble yang di tengah (langsung dibentuk di layer .bubble ibarat biasa), dan 1 detik pada bubble yang terakhir (last-child).

CSSnya ibarat ini:

.bubble{/*CSS YANG TADI DIBIARIN*/display:inline-block;width:20px;height:20px;border-radius:50%;-moz-border-radius:50%;background:#f0f0f0;box-shadow:0px 0px 10px #777;-moz-box-shadow:0px 0px 10px #777;animation:gerak 2.5s infinite;-webkit-animation:gerak 2.5s infinite;-o-animation:gerak 2.5s infinite;-moz-animation:gerak 2.5s infinite;-ms-animation:gerak 2.5s infinite;/*DELAY UNTUK BUBBLE YANG DI TENGAH*/animation-delay:0.5s; -moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;-o-animation-delay:0.5s;-ms-animation-delay:0.5s;}.bubble:first-child{ /*TIDAK ADA DELAY UNTUK BUBBLE PERTAMA ALIAS LANGSUNG MULAI*/animation-delay:0s;-moz-animation-delay:0s;-webkit-animation-delay:0s;-o-animation-delay:0s;-ms-animation-delay:0s;}.bubble:last-child{ /*DELAY 1 DETIK UNTUK BUBBLE TERAKHIR*/animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s;-o-animation-delay:1s;-ms-animation-delay:1s;}

Wah,, keliatannya panjang amat ya.. Tenang aja,, sebenernya sintaksnya cuma animation-delay: sekian detik; aja,, tapi sebab ini CSS3 juga ya jadi keliatan banyak gara-gara harus buat banyak prefixnya.. 😀

 

Kalau kita sudah mengikuti dari awal hingga disini, maka jadilah ibarat ini :

 

Nah,, demikianlah tutorial aku kali ini ihwal menciptakan bubble loading.. Kebetulan yang aku sanggup cuma buat CSSnya aja, jadi jika ada pertanyaan kayak “Gimana supaya loadingnya ilang sendiri sesudah jeda waktu sekian detik?” 
atau kayak “Gimana supaya loadingnya ini muncul dikala aku ngeklik link ini?” saya cuma sanggup jawab pake javascript. Tanya sama ahlinya

Author: 
    author
    No related post!