CSS: Membuat Skeleton Loader

Loader umum digunakan pada konten yang membutuhkan waktu lebih untuk memuatnya. Komponen ini cukup penting karena dapat memengaruhi keputusan pengguna untuk tetap menunggu atau pergi meninggalkan situs.

Situs semacam lokapasar (marketplace) biasa menggunakan Skeleton Loader sebagai tampilan untuk menunggu kontennya termuat. Tampilan ini meniru tata letak dari konten yang sedang dimuat sehingga secara psikologis efektif untuk membuat pengguna menunggu.

Artikel ini akan membahas pembuatannya dengan memanfaatkan selector ::after. Selector ini bisa dibilang dapat menciptakan 'elemen tambahan' setelah elemen HTML mana pun yang kita inginkan.

Sebelum mulai, berikut saya lampirkan kode latihan jika kamu ingin sambil mempraktikkannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton Loader | divClassId</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <article class="card">
    <div class="card__image"></div>
    <div class="card__title"></div>
    <div class="card__description"></div>
  </article>
</body>
</html>

*, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-black-transparent: hsla(0, 0%, 0%, .1);
  --color-gray: #cccccc;
  --color-green: #0b6758;
  --color-white: #fcfcfc;
}

html {
  height: 100%;
}

body {
  background-color: var(--color-green);
  height: 100%;
  padding: 10px;
}

.card {
  background-color: var(--color-white);
  margin: 0 auto;
  max-width: 300px;
  padding: 15px;
}

.card > div {
  background-color: var(--color-gray);
}

.card > div::after {

}

.card__image {
  height: 150px;
}

.card__title {
  margin-top: 15px;
  height: 25px;
  width: 75%;
}

.card__description {
  height: 10px;
  margin-top: 10px;
  width: 90%;
}

@keyframes loader {

}

Sekarang, mari kita buat!

Kode di atas akan menampilkan sebuah card lengkap dengan placeholder dari tata letak kontennya, seperti gambar, judul, dan deskripsi. Saya yakin kamu tidak akan kesulitan memahami style yang dibutuhkan untuk membuat tampilan ini.

Fokus kita sekarang adalah pada selector .card > div::after dan @keyframes loader. Penggunaan ::after membuat kita tidak memerlukan elemen <div> tambahan untuk menciptakan animasi di atas placeholder tersebut.

Sebelum menciptakan animasi yang dimaksud, kita tambahkan dahulu style berikut:

.card > div::after {
  background-color: var(--color-black-transparent);
  content: "";
  display: block;
  height: 100%;
  margin-left: -100%;
  width: 100%;
}

content: "" dan display: block ditambahkan agar efek 'elemen tambahan' dari ::after dapat ditampilkan dan diperlakukan layaknya sebuah block level element (seperti <div>).
height: 100% dan width: 100% ditambahkan agar 'elemen tambahan' ini punya ukuran yang sama dengan placeholder.
margin-left: -100% ditambahkan agar 'elemen tambahan' ini bergeser ke kiri sehingga tidak menutupi placeholder.

Penggunaan selector ::after menciptakan kotak tambahan setelah placeholder

Seperti yang kamu lihat, sekarang ada sebuah kotak tambahan seukuran masing-masing placeholder di sebelah kirinya. Selanjutnya kita tinggal beri animasi kepada kotak tersebut yang akan bergerak dari kiri ke kanan.

Tambahkan style berikut untuk membuat animasi yang dimaksud:

.card > div::after {
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-name: loader;
  /* Kode lainnya */
}

@keyframes loader {
  100% {
    margin-left: 100%;
  }
}

animation-name: loader ditambahkan untuk memanggil @keyframes loader yang menyimpan nilai animasi.
animation-duration: 1000ms ditambahkan agar animasi dijalankan selama satu detik.
animation-iteration-count: infinite ditambahkan agar animasi terus dijalankan berulang-ulang.
```
@keyframes loader {
  100% {
    margin-left: 100%;
  }
}
```
Ketika animasi dijalankan sesuai durasinya, kotak tambahan yang sebelumnya ada di sebelah kiri placeholder akan berakhir di sebelah kanannya.

Animasi kotak tambahan bergerak dari kiri ke kanan dan berulang-ulang

Animasi kita sudah selesai. Sekarang kita hanya perlu menyembunyikan kotak yang bergerak tersebut ketika berada di luar batas placeholder.

Untuk menyembunyikannya kita hanya perlu menambahkan style berikut:

.card > div {
  /* Kode lainnya */
  overflow: hidden;
}

Animasi kotak tambahan hanya muncul di atas placeholder

Demikian pembahasan tentang membuat Skeleton Loader. Semoga bermanfaat.

divclassid

divclassid

CSS: Membuat Skeleton Loader