Cara Membuat Skeleton Loader Reusable menggunakan Javascript - Code Pelajar
Code Pelajar - Halo Sob, gmna kabarnya? Maaf, blog ini lama gak update karena kesibukan di tempat kuliah & kerja. Sedikit intermezzo kenapa kemarin domain dialihkan ke blogspot & kok setelah balik kedomain utama gak ada perubahan?
Awalnya saya dan teman saya ingin sekali membuat website ini menjadi lebih baik, kita sebagai web developers mempunyai ego tersendiri ketika kita masih menggunakan template/platform bawaan orang. Jadisih, intinya kita cuma pengen buat semuanya sendiri & ternyata pengerjaan nya banyak kepotong yang lain jadi pending terus, daripada website ini gak jalan-jalan lebih baik saya kembalikan ke domain utama saja dlu, selagi development.

Persiapan Membuat Skeleton Loader menggunakan Javascript

Kalian yang belum tau apa itu skeleton Loader(shimmer effect), skeleton sendiri adalah preLoader sebelum content dimuat. Skeleton Loader banyak dipakai di platform2 besar seperti Facebook,Instagram,Youtube dan masih banyak yang lainnya.
Di Tutorial ini saya akan memberikan contoh penerapannya pada sebuah Card/Grid
  1. Pertama salin + terapkan Grid ini di projek kalian.
  2. 
    <div class="container">
    <div class="row">
    
    <div class="cards">
        <div class="cards-items">
            <div class="cards-thumb"><img src="https://4.bp.blogspot.com/-zPQbSnR3m8w/XV_T5pTOhvI/AAAAAAAAEes/62eC7eqw55Agy3KMA4r6hww4rnWsTzpBACLcBGAs/s1600/promotion-group-codepelajar.jpg" alt="img-codepelajar" style="width: 100%;"></div>
            <div class="cards-body">
                <h1 style="font-size: 20px;">Code Pelajar Comeback!</h1>
                <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
            </div>
        </div>
    </div>
    
    </div>
    </div>
    
  3. Lalu salin + terapkan CSS ini di projek kalian.
  4. 
    <style>
    * {
      box-sizing: border-box;
    }
    
    .container {
      max-width: 1020px;
      margin: auto;
      width: 100%;
    }
    
    .container .row {
      display: flex;
      flex-wrap: wrap;
    }
    
    .container .row .cards {
      width: 33.33333%;
      padding: 14px;
    }
    .container .row .cards .cards-body {
      padding: 14px;
    }
    
    .section-container {
      padding: 40px 0;
    }
    
    .container .row .cards .cards-items {
      box-shadow: 0 2px 25px 0.5px rgba(0, 0, 0, 0.1);
      transition: 0.5s;
    }
    
    .container .row .cards .cards-items:hover {
      box-shadow: 0 2px 25px 0.5px rgba(0, 0, 0, 0.22);
      transition: 0.5s;
      transform: translateY(-5px);
    }
    </style>
    
    Cara Membuat grid sendiri saya tidak akan membahasnya karena sudah pernah saya bahas di tutorial sebelumnya, Tips Membuat Grid yang rapih (Konsep Layouting Grid)

Membuat Element yang di Overlay

Konsep Skeleton Loader(shimmer effect) sebenarnya cukup mudah, kalian hanya perlu membuat sebuah element yang dibuat overlay dan sisanya hanya bermain di opacity nya saja.
  1. Salin dan terapkan HTML berikut di dalam element yang ingin kalian pasang Skeleton Loadernya.
  2. <span class="overlay"></span>
    Contoh: Saya ingin memasukkannya kedalam class .card-thumb. Maka jadinya akan seperti ini.
    <div class="cards">
        <div class="cards-items">
            <div class="cards-thumb">
              <span class="overlay"></span>
    <img src="https://4.bp.blogspot.com/-zPQbSnR3m8w/XV_T5pTOhvI/AAAAAAAAEes/62eC7eqw55Agy3KMA4r6hww4rnWsTzpBACLcBGAs/s1600/promotion-group-codepelajar.jpg" alt="img-codepelajar" style="width: 100%;" /></div> <div class="cards-body"> <h1 style="font-size: 20px;">Black Hole ReactJS</h1> <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p> </div> </div> </div>
  3. Jika sudah maka mari kita membuat CSSnya.
  4. <style>.overlay {
    opacity: 1;
        z-index: 99;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ccc;
        background-image: linear-gradient(90deg, #F4F4F4 0, rgba(229, 229, 229, 0.8) 54px, #F4F4F4 133px);
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(8%, #eeeeee),
        color-stop(18%, #dddddd),
        color-stop(33%, #eeeeee)
      );
      background-size: 800px 104px;
      animation: codepelajar-shimmer 2s infinite ease-out;
    }
    
    @keyframes codepelajar-shimmer {
      0% {
        background-position: -32px;
      }
      40%,
      100% {
        background-position: 208px;
      }
    }</style>
  5. Dan Lihat lah hasilnya, apakah berantakan? skeleton Loader nya keluar wrapper thumbnail nya? ya, karena kita tidak memberi batasan pada parent nya.
  6. CSS : Dasarnya ketika element yang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut.
  7. Coba sekarang kamu tambahkan in-line CSS di element <div class="cards-thumb">, maka seperti dibawah ini.
  8. <div class="cards-thumb" style="position:relative">
        <span class="overlay"></span>
        <img src="https://4.bp.blogspot.com/-zPQbSnR3m8w/XV_T5pTOhvI/AAAAAAAAEes/62eC7eqw55Agy3KMA4r6hww4rnWsTzpBACLcBGAs/s1600/promotion-group-codepelajar.jpg" alt="img-codepelajar" style="width: 100%;" />
    </div>
  9. dan lihatlah hasilnya, jika belum berhasil check lagi dengan teliti.

Demo: Skeleton Loader(shimmer effect)

img-codepelajar

codepelajar.com

Skeleton Loader(codepelajar.com)

Untuk Test Demo Loader di atas silahkan, buka di console saja dan langsung salin & terapkan javascript dibawah ini.

Memasang setTimeout Menggunakan Javascript

  1. Salin & terapkan Javascript dibawah ini
  2. <script> setTimeout(function() {
        var elements = document.getElementsByClassName('overlay'),
            i, collection;
        for (i = 0, collection = elements.length; i < collection; i++) {
            elements[i].style.opacity = "0";
        }
    
    }, 3000); < /script>
    Code Penjelasan
    setTimeout() Untuk mengatur Timer, berapa lama Loader akan berjalan ketika script di render.
    3000 3000 disana adalah 3 detik. Jadi waktu lama Loader akan tampil adalah selama 3 detik.
    var elements = document.getElementsByClassName('overlay'), i, collection; Deklarasi Variabel
    getElementsByClassName('overlay') return'nya objek mirip array, yaitu HTMLCollection dari seluruh elemen DOM yang memiliki properti class yang cocok.
    for (i = 0, collection = elements.length; i < collection; i++) { elements[i].style.opacity = "0"; } Karena returnnya object mirip array/ HTMLCollection maka kita perlu looping sesuai panjang datanya.
    elements[i].style.opacity = "0"; Untuk membuat Loader Transparan, kita hanya perlu set Opacity menjadi 0 saja.
  3. Sampai sini saya harap kalian semua sudah mengerti.

Baik, mungkin tutorial kali ini sampai sini saja dulu, saya harap saya bisa terus berbagi apa yang telah saya pelajari kedepannya dan mudah-mudah2an Codepelajar bisa bermanfaat buat kalian yang baru belajar.

Table Of Content


    Contact Form

    Kirim