Membuat Skeleton Loader Dengan CSS Dan JS

ahlikode.com: Skeleton Loader

 Ahlikode.com - Pada tutorial kali ini saya akan memcoba membuat  Skeleton Loader. Skeleton Loader adalah kerangka yang berfungsi untuk menampilkan data atau informasi yang masih loading. ketika loading telah selesai, maka data atau informasi tersebut akan muncul  dan biasanya Skeleton Loader disebut juga dengan pemuat halaman atau kerangka.

Yuk, Langsung saja ikuti langkah - langkah ini sebagai berikut:

Buatlah sebuah file yang bernama `index.html`. lalu, kalian ketik di kodingan kalian ataupun kalian bisa langsung copy lalu mempastekannya dikodingan kalian.

<!doctype html>
    <html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ahlikode.com</title>
        <!-- Style CSS -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
        <h1 class="heading-title">Tutorial Membuat Skeleton Loader - Ahlikode.com</h1>
        <div class="loader-skeleton">
            <div class="boxes-start-noremove">
            <article>
                <div class="image-src"></div>
                <div class="desription-text">
                <h3></h3> 
                <div class="lines"></div>
                <div class="lines"></div>
                </div>
            </article>
            <article>
                <div class="image-src"></div>
                <div class="desription-text">
                <h3></h3>
                <div class="lines"></div>
                <div class="lines"></div>
                </div>
            </article>
            <article>
                <div class="image-src"></div>
                <div class="desription-text">
                <h3></h3>
                <div class="lines"></div>
                <div class="lines"></div>
                </div>
            </article>
            </div>
        </div>
        <div class="content-start">
            <div class="boxes-start-noremove">

            <article>
                <div class="image-src">
                <a href="https://ahlikode.com/articles/panduan-membuat-lingkaran-dihtml-dengan-css/"> 
                <img src="https://ahlikode.com/articles/panduan-membuat-lingkaran-dihtml-dengan-css/thumbnail_huf6a9d778351b00a3df7543aadd63d5d7_40824_900x0_resize_box_2.png" />
                </a>
                </div>
                <div class="desription-text">
                <h3>Cara Membuat Lingkaran Dihtml Dengan Css</h3>
                </div>
            </article>

            <article>
                <div class="image-src">
                <a href="https://ahlikode.com/articles/membuat-sidebar-dengan-bootstrap/"> 
                <img src="https://ahlikode.com/articles/membuat-sidebar-dengan-bootstrap/thumbnail_hud2228667be8443a5f3d09b5a02fd01f2_68757_400x0_resize_box_2.png" />
                </a>
                </div>
                <div class="desription-text">
                <h3>Cara Membuat Sidebar Dengan Bootstrap 4</h3>
                </div>
            </article>


            </div>
        </div>
        </div>
    
        <script src="script.js"></script>
    </body>
    </html>

Cukup Sederhana bukan. lalu, kalian harus membuat file yang bernama `style.css` untuk mempercantik Skeleton Loadernya.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins";
    }
    .heading-title  {
    text-align: center;
    font-size: 2.5em;
    margin: 2em 0;
    }
    .boxes-start-noremove {
    display: grid;
    grid-template-rows: repeat(1fr);
    grid-row-gap: 1em;
    margin: 1em;
    }
    .loader-skeleton {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 13em;
    left: 0;
    transition: 0.6s all ease;
    }
    .loader-skeleton.hide {
    opacity: 0;
    pointer-events: none;
    }
    .loader-skeleton article .image-src {
    height: 150px;
    width: 250px;
    }
    .loader-skeleton article h3 {
    height: 1.5em;
    width: 80%;
    }
    .loader-skeleton article .lines {
    height: 1em;
    width: 350px;
    margin-top: 1em;
    }
    .loader-skeleton article .image-src,
    .loader-skeleton article h3,
    .loader-skeleton article .lines {
    background-color: #ccc;
    border-radius: 7px;
    background-image-src: linear-gradient(
        90deg,
        #f4f4f4,
        rgba(229, 229, 229, 0.7) 90px,
        #f4f4f4 150px
    );
    background-size: 600px;
    animation: loading 6s infinite linear;
    }
    @keyframes loading {
    0% {
        background-position: -100px;
    }
    100% {
        background-position: 300px;
    }
    }
    .content-start {
    opacity: 0;
    pointer-events: none;
    }
    .content-start.show {
    opacity: 1;
    pointer-events: all;
    }
    .boxes-start-noremove img {
    height: 150px;
    width: 250px;
    border-radius: 5px;
    }
    .boxes-start-noremove article {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-column-gap: 1em;
    }
    .boxes-start-noremove article .image-src {
    justify-self: center;
    }
    .boxes-start-noremove article .desription-text {
    font-size: 0.85em;
    }

Fungsi dari `style.css` yang saya  buat ini adalah untuk mengatur tampilan Skeleton Loader yang akan  dibuat. dan agar Skeleton Loader berfungsi pada saat menjalankannya, kalian harus membuat file yang bernama `script.js`.

    const loader = document.querySelector(".loader-skeleton");
    const content = document.querySelector(".content-start");
    window.addEventListener("load", () => {
    loader.classList.add("hide");
    content.classList.add("show");
    });

Fungsi dari javascript yang saya  buat adalah untuk menyembunyikan atau menampilkan Skeleton Loader. 

jika tidak ada javascript maka Skeleton Loader akan tetap memuat atau loading halaman, tidak akan berhenti.


Okelah, sekalian dari tutorial saya. semoga bermanfaat, sampai jumpa di artikel berikutnya... jika ada kendala atau masalah silahkan `berkomentar`.

Comments

Popular posts from this blog

Cara Membuat Sidebar Dengan Bootstrap 4

Panduan Membuat Form Login Dengan Bootstrap 5

Cara Membuat Newsletter Di blog Dengan Formspree