Cara Membuat Pre-loader dengan CSS dan JQuery

10 November 2021 | Kategori : Tutorial

Hai hai hai sobat semua, gimana kabarnya? masih semangat buat belajarkan hehehe... Pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat animasi preloader sederhana dengan menggunakan CSS dan juga JQuery.

preloader.png

Apa itu preloader ?

Preloader merupakan sebuah animasi loading ketikan website kita diakses. Saat ini sudah banyak website-website yang menggunakan preloader.

Cara Membuat Preloader

Untuk membuat Preloader sendiri tidaklah sulit sob, langsung saja sobat ikuti langkah-langkah di bawah ini :

Membuat struktur HTML

Pertama silahkan sobat buat sebuah file, karena ini hanya contoh, saya membuat file dengan nama index.html lalu saya letakkan di sebuah folder. Setelah itu, silahkan sobat ketikkan struktur html seperti di bawah ini :

<!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>Contoh Preloading</title>
</head>
<body>
    <div id="background-loading">
        <span class="loading-text">LOADING</span>
        <div class="loader"></div>
    </div>

    <div class="content">
        <p>Ini adalah bagian Content</p>
    </div>
</body>
</html>

Membuat File CSS

Setelah sobat membuat struktur html, sekarang silahkan sobat buat sebuah file css, sebagai contoh saya membuat sebuah file dengan nama style.css dan letakkan kedalam folder yang sama dengan file html tadi ya sob. Setelah itu, silahkan sobat ketikkan script css berikut ini pada file css tadi

#background-loading {
  background: #07131e;
  z-index: 99999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

.loading-text {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -32px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 4px solid transparent;
  border-top-color: #ffa500;
  border-bottom-color: #ffa500;
  border-radius: 50%;
  animation: loading 2s linear;
  animation-iteration-count: infinite;
}

.loader::after,
.loader::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.loader::after {
  left: 15px;
  top: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid transparent;
  border-top-color: #32cd32;
  border-bottom-color: #32cd32;
  animation: loading 1.5s linear;
  animation-iteration-count: infinite;
}

.loader::before {
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border: 3px solid transparent;
  border-top-color: #03afdb;
  border-bottom-color: #03afdb;
  animation: loading 3s linear;
  animation-iteration-count: infinite;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

Jika sudah, silahkan sobat simpan kemudian silahkan sobat tambahkan tag berikut di atas </head>

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

oh iya untuk nama filenya sobat sesuaikan dengan file yang sobat buat tadi ya.

Menambahkan Jquery

Setelah sobat membuat file html dan css nya, sekarang silahkan sobat download jquery.js kemudian silahkan sobat letakkan ke dalam folder yang sama dengan index dan css tadi.

Jika sudah, silahkan sobat load jquery tadi dengan menambahkan script berikut di atas </body>

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

Kemudian tambahkan script berikut ini di bawah script jquery tadi :

<script>
        $(window).load(function(){
            $('#background-loading').fadeOut("slow");
        });
</script>

lalu Save

Sehingga struktur akhir file html tadi seperti ini :

<!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>Contoh Preloading</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="background-loading">
        <span class="loading-text">LOADING</span>
        <div class="loader"></div>
    </div>

    <div class="content">
        <p>Ini adalah bagian Content</p>
    </div>

    <script src="./jquery.js"></script>
    <script>
        $(window).load(function(){
            $('#background-loading').fadeOut("slow");
        });
    </script>
</body>
</html>

Jika sudah silahkan sobat coba jalankan file index.html tadi, maka akan ada animasi preload nya sebelum menampilkan kalimat "Ini adalah bagian Content"

Bagi sobat yang tidak mau repot, silahkan sobat download filenya melalui link di bawah ini :

Baik sobat saya rasa cukup ini yang bisa saya bagikan tentang cara membuat preloading dengan css dan jquery, semoga bisa bermanfaat buat sobat semua ya..