membuat loading cantik dengan css dan javascript

Membuat Loading Cantik dengan CSS dan Javascript

Pada era digital ini, penggunaan loading pada sebuah website atau aplikasi sangatlah penting. Loading digunakan untuk memberikan pengalaman pengguna yang lebih baik dengan memberikan indikasi bahwa proses sedang berjalan atau sedang mengambil data dari server. Namun, tidak jarang pengguna merasa bosan atau tidak tertarik dengan tampilan loading yang biasa-biasa saja. Oleh karena itu, dalam artikel ini kita akan membahas cara membuat loading cantik dengan bantuan CSS dan Javascript.

Langkah 1: Membuat Struktur HTML
Langkah pertama yang harus dilakukan adalah membuat struktur dasar HTML untuk loading. Berikut adalah contoh struktur dasar HTML yang dapat digunakan:

html
<!--DOCTYPE html-->
<html>
<head>
  <title>Loading Cantik</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="loading-container">
    <div class="loader"></div>
  </div>

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

Pada kode di atas, kita menggunakan div dengan id "loading-container" sebagai wadah untuk loading. Di dalamnya, kita akan menambahkan elemen div dengan class "loader" yang akan kita gunakan untuk membuat loading cantik.

Langkah 2: Membuat CSS Styling
Setelah membuat struktur HTML, langkah selanjutnya adalah membuat CSS styling untuk loading. Di dalam file style.css, tambahkan kode berikut:

css
#loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Pada CSS di atas, kita menggunakan CSS Flexbox untuk membuat tata letak loading menjadi di tengah-tengah halaman. Kami juga memberikan animasi berputar menggunakan CSS keyframes dan membuat tampilan loading menjadi lebih menarik dengan penggunaan warna pada border.

Langkah 3: Membuat Javascript untuk Tombol Loading
Langkah terakhir adalah membuat script.js, yang akan mengatur tampilan loading saat halaman dimuat. Tambahkan kode berikut pada file script.js:

javascript
document.onreadystatechange = function() {
  if (document.readyState !== "complete") {
    document.querySelector("#loading-container").style.opacity = "1";
  } else {
    document.querySelector("#loading-container").style.opacity = "0";
    document.querySelector("#loading-container").style.display = "none";
  }
};

Dalam script.js di atas, fungsi document.onreadystatechange akan memeriksa state halaman dan mengatur opacity dan display dari elemen dengan id "loading-container" sesuai dengan state halaman. Ketika halaman belum selesai dimuat, opacity akan diatur sebagai 1 sehingga loading akan terlihat. Ketika halaman selesai dimuat, opacity akan diatur sebagai 0 dan display akan diatur sebagai none sehingga loading akan menghilang.

Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat loading cantik dengan menggunakan CSS dan Javascript. Anda dapat menyesuaikan kode CSS dan Javascript sesuai dengan preferensi pribadi Anda untuk mencapai tampilan loading yang cantik dan menarik. Dengan tampilan loading yang menarik, pengguna dapat merasa lebih tertarik dan bersemangat saat menggunakan website atau aplikasi yang Anda buat.

berikut video membuat loading cantik dengan css dan javascript

Tidak menemukan artikel? cari disini

membuat loading cantik dengan css dan javascript

Tidak ada komentar

Most Popular

Advertising

Popular

Translate

Tidak menemukan artikel? cari disini

membuat loading cantik dengan css dan javascript

Baca Juga

Tidak ada komentar

Most Popular

Advertising

Popular

Translate