Membuat Animasi Loading Bubble dengan
Full CSS
Oleh: Christian Rosandhy
Masih bermain dengan animasi,, sekarang kita akan belajar membuat
sendiri animasi bubble loading dengan bantuan CSS3. Di tutorial ini kita
nggak akan menggunakan gambar apapun supaya loadingnya nanti bisa
lebih cepat. Yang pengen coba, yuk disimak.. :)
Salam jagocoding,, kali ini masih dengan CSS, saya mau share tutorial membuat animasi loading bubble hanya dengan CSS. Animasi loading bubble yang akan saya jelaskan kali ini tidak memerlukan gambar apapun, sehingga loading bubble ini bisa diaplikasikan di website manapun dengan loading yang lebih cepat.
Untuk memulai ini, minimal kita punya sedikit pengetahuan dasar tentang CSS 3 Animation. Karena sintaks yang akan dipakai kali ini nggak jauh-jauh dari sana.. Yuk langsung disimak aja ya.. :)
Supaya hasilnya lebih asik, mungkin ada baiknya kita mengerjakan tutorial ini di website yang sudah ada isinya saja.. Atau kalau mau buat dari website kosongan, ya diisi-isi aja dulu deh dengan konten sembarangan.. Saya coba isi websitenya dulu dengan lorem ipsum.. :P
<!--Di copy paste puluhan kali biar 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 seperti ini di bagian 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 menggunakan 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 langsung ke CSSnya aja ya,,
Pertama-tama kita buat layer overlaynya dulu. Kita ingin membuat seluruh halaman website menjadi hitam transparan biarpun discroll sampai manapun. CSSnya seperti ini:
/*CSS RESET*/
*{margin:0px auto;}
.overlay{
position:fixed; /*supaya tetap diam biarpun discroll*/ background:rgba(0,0,0,.25); /*warna hitam transparan*/ width:100%;
height:100%; }
Setelah itu, kita atur posisi layer loading supaya tepat 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 dapat lihat tutorial di Tutorial Lengkap Memahami CSS Position). Pengaturan layoutnya seperti 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 seperti screenshot pertama.
Setelah itu kita baru mendesain layer .bubble. Membuat lingkaran dengan CSS bisa dibantu dengan CSS3 Border-radius. Jangan lupa menggunakan display:inline-block; supaya bubble tersebut tetap mengalir ke samping, dan bukan ke bawah..
.bubble{
display:inline-block; width: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 adalah 3 bubble yang persis di tengah halaman seperti ini :
Sampai disini, desain awal sudah selesai kita buat. sekarang kita membuat animasi supaya bubble tersebut membesar dan berubah warna secara bergiliran. Seperti biasa, dalam membuat animasi kita harus membuat dulu alur animasinya dengan @keyframe.
Disini saya akan membuat keyframe dengan 3 alur sederhana, yaitu posisi awal (0%), posisi ketika membesar dan berubah warna (50%), dan kembali ke awal (100%). Alurnya dapat dikembangkan lebih banyak lagi, asalkan posisi awal 0% dan 100% menghasilkan nilai yang persis sama, supaya bubble dapat 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, sekarang 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-.. :D .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, sampai disini sudah hampir selesai lho.. Kalau dijalankan, animasinya sudah mau berjalan sih,, t a p i m a s i h b e r j a l a n b e r b a r e n g a n . . L i a t d i s i n i d e h :
http://googledrive.com/host/0BxJr5IwDY6kEa0F3OFN2b1FjU0U/demo1.html. Sekarang kita kasih trik tambahan biar bubblenya bisa bergerak bergantian satu dengan yang lainnya. Disini kita membutuhkan bantuan pseudo class :first-child, last-child, dan CSS3 animation-delay.
akan memberikan delay 0 detik pada bubble pertama (first-child), lalu memberikan delay selama 0.5 detik pada bubble yang di tengah (langsung dibuat di layer .bubble seperti biasa), dan 1 detik pada bubble yang terakhir (last-child).
CSSnya seperti 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; }
sekian detik; aja,, tapi karena ini CSS3 juga ya jadi keliatan banyak gara-gara harus buat banyak prefixnya.. :D
Kalau kita sudah mengikuti dari awal sampai disini, maka jadilah seperti ini :
Nah,, demikianlah tutorial saya kali ini tentang membuat bubble loading.. Kebetulan yang saya bisa cuma buat CSSnya aja, jadi kalau ada pertanyaan kayak "Gimana biar loadingnya ilang sendiri setelah jeda waktu sekian detik?"
atau kayak "Gimana biar loadingnya ini muncul ketika saya ngeklik link ini?" saya cuma bisa jawab "
pake javascript. Tanya sama ahlinya~" :D
Terima kasih banyak atas perhatiannya,, Semoga tutorial ini berguna untuk kita semua.. :)
Tentang Penulis
Christian Rosandhy
Saya adalah seorang penggemar komputer, terutama di bagian CSS atau PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya sedang berusaha belajar sebanyak-banyaknya.
