Membuat Animasi Loading pada Gambar Postingan Blog dengan Efek Blur

Coretan Si Mimin, BOGOR - Sering kita temui ketika kita sedang berinternet menjelajah untuk mencari sesuatu yang kita cari, entah itu artikel untuk kita baca, ataupun yang lainnya. Dari sebagian website ataupun blog, sudah banyak yang menggunakan animasi loading pada gambar dalam postingan tersebut.

Pada artikel sebelumnya, mimin juga sudah menjelaskan tentang manfaat dan kekurangan dari loading gambar ini, sobat bisa baca selengkapnya: manfaat dan kekurangan menggunakan loading gambar pada blog.

Apabila sobat adalah pemilik blog, dan belum menggunakan loading gambar postingan, sobat bisa mempertimbangkan untuk memakainya.

Bagaimana Cara Membuat Animasi Loading pada Gambar Postingan Blog?

Untuk cara membuat animasi loading pada gambar itu cukup mudah, ditambah dengan sentuhan efek blur akan membuatnya menjadi lebih bagus. Di sini kita akan menggunakan HTML, CSS, dan JAVASCRIPT sebagai bahan-bahannya.

Gimana ... apakah sobat tertarik? Jika tertarik, yuk langsung saja kita ke tahap dan cara membuatnnya.

Membuat Animasi Loading pada Gambar Postingan Blog dengan Efek Blur

Perhatikan dengan seksama! Berikut ini adalah contoh implementasinya:

1. Buat Kode HTML

Untuk langkah yang pertama, kita akan membuat HTML nya terlebih dulu. Bisa dilihat contoh HTML di bawah:

<div id="loading-container">
  <div id="loading-image"></div>
</div>

2. Buat Kode CSS

Langkah kedua yaitu, membuat CSS. Sobat bisa lihat penampakannya di bawah ini:

#loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-image {
  width: 100px;
  height: 100px;
  background-image: url('loading.gif');
  background-size: cover;
  filter: blur(8px);
}

3. Buat Kode JAVASCRIPT

Langkah yang ke tiga adalah, membuat javascript. Di bawah bisa sobat lihat contoh javascriptnya:

window.addEventListener('load', function() {
  var loadingContainer = document.getElementById('loading-container');
  loadingContainer.style.display = 'none';
});

Penjelasan:

1.1. Di dalam elemen HTML, kita menggunakan div dengan id "loading-container" sebagai wadah untuk loading image. Kemudian, kita menggunakan div dengan id "loading-image" sebagai elemen yang akan menampilkan gambar loading. Di sini, sobat bisa mengganti "loading.gif" dengan gambar loading yang sesuai.

2.2. Di bagian CSS, kita mengatur posisi dan tampilan dari elemen "loading-container" dan "loading-image". Elemen "loading-container" akan mengisi seluruh layar dengan latar belakang semi-transparan menggunakan warna rgba(0, 0, 0, 0.5). Elemen "loading-image" akan menampilkan gambar loading dengan ukuran 100x100 piksel dan diberi efek blur menggunakan properti filter.

3.3. Di dalam JavaScript, kita menggunakan event listener 'load' pada objek window untuk menyembunyikan elemen "loading-container" setelah halaman selesai dimuat. Ini diasumsikan sebagai tanda bahwa gambar atau konten lainnya telah diunduh dan siap ditampilkan.

Sobat juga bisa menyesuaikan kode tersebut dengan gambar dan gaya CSS sesuai kebutuhan. Dan jangan lupa untuk mengganti "loading.gif" dengan nama file gambar loading sobat sendiri dan menyesuaikan ukuran di dalam properti CSS.

Demikianlah tutorial membuat animasi loading pada gambar postingan blog dengan efek blur. Semoga artikel ini bermanfaat untuk sobat semua.