fyi.my.id – Javascript Skeleton Loading. Hallo Semuanya, Apakabar?. kali ini saya selaku admin blog FYI Indonesia mau membagikan tutorial cara memasang skeleton loading.
Sebelum membaca lebih jauh, kita wajib tau skeleton loading itu apa dan fungsimya untuk apa.
Apa itu Skeleton Loading ?
Sebagai pengguna sosial media seringkali kita melihat proses memuat konten pada sebuah tampilan Timeline media sosial, yang memuat layout konten berupa panel-panel yang berwarna grey atau abu abu, beberapa saat sebelum muncul data berupa gambar, video atau tulisan. Yup, inilah yang disebut Skeleton Loading.
Skeleton loading sendiri saat ini menjadi salah satu loading indicator yang sering digunakan oleh para Product Designer. beberapa Platform atau perusahaan besar seperti facebook, Youtube, linkeding dan Google juga menggunakanya dalam product mereka.
Nah Setelah tau apa itu skeleton loading dan tau fungsinya untuk apa, kalian yang tertarik bisa ikuti turorial yang akan saya berikan dibawah.
Harap diperhatikan kalau kode skeleton loading ini adalah kode mentah (butuh pengembangan), jadi kalian tidak bisa asal pakai karena itu akan berdampak pada tampilan tema anda jika salah memasang.
Contoh HTML Skeleton Loading
<div class='progress sprogress'> <div class='skeleton2'/> <div class='skeleton3'/> <div class='skeleton4'/> <div class='skeleton5'/> <div class='skeleton5'/></div>Kode HTML diatas adalah contoh dasar untuk membuat skeleton loading, nah lanjut ke CSS.
Contoh CSS Skeleton Loading
@-webkit-keyframes ant-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}@keyframes ant-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.progress{transition: all .5s ease;}.skeleton2 {height: 30px;background: #e2e2e2;float: left;margin-top: 3px;border-radius: 5px;width: 162px;}.skeleton3, .skeleton4 {height: 14px;width: 100%;float: left;background: #e2e2e2;margin-top: 15px;border-radius: 10px;}.skeleton4 {width: 60%;margin-top: 5px;}.skeleton5 {height: 14px;width: 100%;float: left;background: #e2e2e2;margin-top: 15px;border-radius: 10px;}.skeleton5:last-child {margin-top: 5px;}.skeleton1, .skeleton2, .skeleton3, .skeleton4, .skeleton5 {background-color: #e2e2e2;background-image: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);-webkit-animation: ant-skeleton-loading 1.4s ease infinite;background-size: 400% 100%;animation: ant-skeleton-loading 1.4s ease infinite;transition: all .3s ease;}Diatas adalah contoh CSS untuk skeleton loading. Lanjut ke JSnya.
Contoh JS Skeleton Loading
<script type='text/javascript'>//<![CDATA[$(document).ready(function() {$('.progress').removeClass('sprogress').addClass('hidden');});//]]></script>Diatas adalah contoh javascriptnya, JS itu punya fungsi untuk menghapus HTML diatas sesudah loading selesai.
Begitulah contoh dasar memasang skeleton loading, semoga bermanfaat dan maaf bila pemilihan kata-katanya bikin pusing haha. Dibawah ini contoh skeleton loading yang sudah kita buat diatas.
Jika tampilan tidak sesuai dengan demo diatas/ tidak mengerti, silahkan komentar dibawah
Dapatkan update artikel blog terbaru, panduan praktis, studi kasus web, serta tips digital eksklusif langsung di WhatsApp Anda.
Setuju banget sama penjelasannya min, kuncinya emang kudu sabar pas di bagian Javascript biar gak gagal.
Wah pas banget lagi nyari panduan soal Tutorial/How-to. Min, kalo ada kendala pas step akhir biasanya solusinya apa ya?
Bantu jawab ya kak @Yudi, kemarin saya nyoba di spek pas-pasan ternyata tetep aman dan lancar kok, asal jangan sambil buka banyak aplikasi berat aja.
Bantu sharing ya kak @Yudi, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Setau saya aman banget gan @Yudi, saya udah jalan hampir sebulan setelah coba trik Skeleton ini dan gak ada kendala sama sekali.
Udah pernah ngalamin problem serupa bulan lalu, untung nemu artikel ini jadi makin paham duduk perkaranya.
Izin nanya gan, ini berlaku juga buat versi sebelum atau sesudahnya gak ya? Ada yang pernah coba?
@Dian pengalaman saya kemarin butuh sekitar 15-20 menitan gan, yang penting ikuti urutannya jangan ada yang diloncat.
@Aulia sip gan responnya jelas banget, makasih banyak pencerahannya!
@Dian mending pake opsi pertama dulu kak, jauh lebih ramah buat pemula dan langkahnya lebih simpel.
Terima kasih banyak infonya kak, ngebantu banget buat tugas saya.
Awalnya sempet skeptis pas baca judulnya, tapi pas dipraktekin step by step ternyata hasilnya memuaskan.
Terima kasih banyak infonya kak, ngebantu banget buat tugas saya.
Penjelasannya enak dibaca, padat dan to the point gak bertele-tele kayak blog sebelah.
Kalo dibandingin sama cara yang lama, metode Skeleton ini ada kelemahan tersendiri gak sih? Masih agak ragu nih.
@Farhan aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
@Farhan kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
Ada yang udah praktekin Pasang Javascript Skeleton? Kira-kira butuh waktu berapa lama ya buat proses lengkapnya?
@Nadya aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
@Nadya mending pake opsi pertama dulu kak, jauh lebih ramah buat pemula dan langkahnya lebih simpel.
Udah pernah ngalamin problem serupa bulan lalu, untung nemu artikel ini jadi makin paham duduk perkaranya.
Terima kasih banyak infonya kak, ngebantu banget buat tugas saya.
Bagus pembahasannya, sudut pandangnya realistis dan gampang dipahami sama orang awam sekalipun.
Kira-kira butuh budget/biaya tambahan lagi gak ya min buat maksimalkan Pasang ini?
Bantu sharing ya kak @Teguh, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
@Teguh kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
Penjelasannya enak dibaca, padat dan to the point gak bertele-tele kayak blog sebelah.
Izin ninggalin jejak dulu min, materinya daging banget.
Setuju banget sama penjelasannya min, kuncinya emang kudu sabar pas di bagian Javascript biar gak gagal.
Nice share min, ilmunya sangat aplikatif.
Kebetulan kemarin lusa sempet nyobain langkah Javascript ini, dan beneran work lancar tanpa kendala.
Awalnya sempet skeptis pas baca judulnya, tapi pas dipraktekin step by step ternyata hasilnya memuaskan.
Nice info min. Mau nanya dong, ada resiko error di tengah jalan gak pas nerapin Pasang Javascript Skeleton ini?
@Yuliana aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
Makasih banyak min, sangat mencerahkan!
Udah pernah ngalamin problem serupa bulan lalu, untung nemu artikel ini jadi makin paham duduk perkaranya.
Kak, kalo di tempat saya hasilnya agak beda, apa ada langkah kecil yang kemungkinan kelewat ya?
@Tari mending pake opsi pertama dulu kak, jauh lebih ramah buat pemula dan langkahnya lebih simpel.
@Tari coba periksa lagi koneksi sama settingan awalnya gan, kemarin saya juga sempet beda ternyata ada satu opsi yang belum diaktifin.
Dulu pernah salah kaprah soal Pasang Javascript Skeleton, sekarang jadi lebih jelas arahnya setelah baca tulisan ini.
Udah saya tes di kondisi real, efektivitas trik Pasang Javascript Skeleton ini emang mantap banget.
Min mau tanya, kalo buat pemula yang baru pertama kali nyoba Pasang Javascript Skeleton, step awalnya mending mulai dari mana dulu ya?
Penjelasannya enak dibaca, padat dan to the point gak bertele-tele kayak blog sebelah.
Bagus pembahasannya, sudut pandangnya realistis dan gampang dipahami sama orang awam sekalipun.
Rekomendasi yang sangat masuk akal sih, langsung saya bookmark buat referensi tim kantor.
Kebetulan kemarin lusa sempet nyobain langkah Javascript ini, dan beneran work lancar tanpa kendala.
Rekomendasi yang sangat masuk akal sih, langsung saya bookmark buat referensi tim kantor.
Nice info min. Mau nanya dong, ada resiko error di tengah jalan gak pas nerapin Pasang Javascript Skeleton ini?
Gak butuh biaya tambahan kok kak @Gita, semuanya bisa pake opsi bawaan atau yang gratisan.
@Gita mending pake opsi pertama dulu kak, jauh lebih ramah buat pemula dan langkahnya lebih simpel.
Rekomendasi yang sangat masuk akal sih, langsung saya bookmark buat referensi tim kantor.
Nice info min. Mau nanya dong, ada resiko error di tengah jalan gak pas nerapin Skeleton ini?
Sama kak @Indah, awalnya saya juga bingung, tapi pas dicoba pelan-pelan ternyata gampang banget dipraktekin.
@Indah kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
@Indah coba periksa lagi koneksi sama settingan awalnya gan, kemarin saya juga sempet beda ternyata ada satu opsi yang belum diaktifin.
Bantu sharing ya kak @Indah, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Izin tanya min, ini aman gak ya kalo diterapin di device yang speknya standar? Takut nge-drop performanya.
@Ilham aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
Sama kak @Ilham, awalnya saya juga bingung, tapi pas dicoba pelan-pelan ternyata gampang banget dipraktekin.
Sama kak @Ilham, awalnya saya juga bingung, tapi pas dicoba pelan-pelan ternyata gampang banget dipraktekin.
Bantu sharing ya kak @Ilham, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Singkat, padat, dan solutif. Makasih admin udah mau berbagi ilmu.
Nice share min, ilmunya sangat aplikatif.
Setuju banget sama penjelasannya min, kuncinya emang kudu sabar pas di bagian Pasang biar gak gagal.
Izin tanya min, ini aman gak ya kalo diterapin di device yang speknya standar? Takut nge-drop performanya.
@Firman aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
@Firman aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
Wah makasih banyak ya kak @Bayu udah bantu jawab, langsung saya coba sekarang deh.
Menarik pembahasannya. Btw ada syarat khusus gak sih min sebelum kita mulai setup Skeleton ini?
@Zahra aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
Nice share min, ilmunya sangat aplikatif.
Nice share min, ilmunya sangat aplikatif.
Bener min, temen saya kemarin juga sempat bingung di bagian Javascript, pas dikasih tips ini langsung solved.