Cara Pasang Javascript 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;}

<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.