Matawebsite Promo Lebaran 2022

Membuat Loading Animasi Saat Load Data

date 16 Oct 2021
date Sulfikardi
date 2378
date Web Design
Membuat Loading Animasi Saat Load Data

Loading animasi sangat penting kita gunakan saat kita melakukan load data agar user tahu bahwa website sedang memuat resource dari server.

Pada kesempatan kali ini kita akan membuat loading animasi saat proses load data.

Langkah pertama kita buat direktori baru untuk menyimpan source code kita nantinya, lalu masuk ke direktori tersebut.

Selanjutnya kita buat file baru dengan nama index.php yang nantinya akan menjadi root direktori saat project dijalankan dari browser.Lalu kita buat kodenya seperti berikut.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Loading Data</title>

    <link rel="stylesheet" href="./style.css">

</head>

<body>

    <h2>Loading Data</h2>

    <div class="container">

        <div class="lds-roller">

            <div></div>

            <div></div>

            <div></div>

        </div>

    </div>

    <?php

        for($i=1; $i<1000; $i++){

            echo "<li>Data ke {$i}</li>";

        }

    ?>

    <script src="./script.js"></script>

</body>

</html>

Selanjutnya kita buat styling untuk loading animasinya seperti berikut.

.container{

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .3);

    display: flex;

    align-items: center;

    justify-content: center;

}

.lds-roller {

    display: inline-block;

    position: relative;

    width: 80px;

    height: 80px;

  }

  .lds-roller div {

    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

    transform-origin: 40px 40px;

  }

  .lds-roller div:after {

    content: " ";

    display: block;

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #fff;

    margin: -4px 0 0 -4px;

  }

  .lds-roller div:nth-child(1) {

    animation-delay: -0.036s;

  }

  .lds-roller div:nth-child(1):after {

    top: 63px;

    left: 63px;

  }

  .lds-roller div:nth-child(2) {

    animation-delay: -0.072s;

  }

  .lds-roller div:nth-child(2):after {

    top: 68px;

    left: 56px;

  }

  .lds-roller div:nth-child(3) {

    animation-delay: -0.108s;

  }

  .lds-roller div:nth-child(3):after {

    top: 71px;

    left: 48px;

  }

  .lds-roller div:nth-child(4) {

    animation-delay: -0.144s;

  }

  .lds-roller div:nth-child(4):after {

    top: 72px;

    left: 40px;

  }

  .lds-roller div:nth-child(5) {

    animation-delay: -0.18s;

  }

  .lds-roller div:nth-child(5):after {

    top: 71px;

    left: 32px;

  }

  .lds-roller div:nth-child(6) {

    animation-delay: -0.216s;

  }

  .lds-roller div:nth-child(6):after {

    top: 68px;

    left: 24px;

  }

  .lds-roller div:nth-child(7) {

    animation-delay: -0.252s;

  }

  .lds-roller div:nth-child(7):after {

    top: 63px;

    left: 17px;

  }

  .lds-roller div:nth-child(8) {

    animation-delay: -0.288s;

  }

  .lds-roller div:nth-child(8):after {

    top: 56px;

    left: 12px;

  }

  @keyframes lds-roller {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

  }

Lalu, kita perlu membuat file javascript untuk memanggil loading animasi saat proses loading data berlangsung, kodenya seperti berikut.

let loading =  document.querySelector('.container')

function hide_loading(){

    let fadeOut = setInterval(function(){

        if(!loading.style.opacity){

            loading.style.opacity = 1

        }

        if(loading.style.opacity > 0){

            loading.style.opacity -= 0.1

        }else{

            clearInterval(fadeOut)

            loading.style.display = "none"

        }

    },100)

}

Setelah semua file selesai dibuat, selanjutnya kita tinggal mengakses projectnya melakui browser, sesuai direktori yang tadi dibuat. 

Matawebsite Promo Lebaran 2022
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Terkait

Halo, ada yang bisa kami bantu?
Daftar Sekarang