Membuat animasi loading pada website dengan javascript dan html

Preloader CSS merujuk pada teknik yang digunakan dalam pengembangan web untuk menampilkan indikator atau animasi yang memuat sebelum konten sebenarnya ditampilkan. Preloader CSS dapat digunakan untuk memberikan pengalaman yang lebih baik kepada pengguna dengan memberikan umpan balik visual bahwa halaman sedang dimuat.

Preloader CSS biasanya terdiri dari elemen HTML dan gaya CSS yang digunakan untuk membuat animasi atau indikator loading. Ketika halaman web dimuat, preloader CSS akan ditampilkan, dan setelah konten selesai dimuat, preloader CSS akan disembunyikan atau dihapus, dan konten yang sebenarnya ditampilkan kepada pengguna.

Preloader CSS sering digunakan ketika halaman web memiliki konten yang memerlukan waktu untuk dimuat, seperti gambar, video, atau sumber daya lainnya yang memerlukan waktu untuk diunduh. Dengan menggunakan preloader CSS, pengguna dapat melihat indikator loading atau animasi yang memberikan kejelasan bahwa halaman sedang dimuat, dan mereka tidak akan mengalami ketidakpastian atau kebingungan selama proses pengunduhan berlangsung.

Preloader CSS dapat diimplementasikan dengan menggunakan berbagai metode, seperti menggunakan animasi CSS, gambar GIF, JavaScript, atau kombinasi dari teknik-teknik ini. Terdapat banyak contoh dan sumber daya di web yang menunjukkan cara membuat preloader CSS dengan gaya yang berbeda.

Dengan menggunakan preloader CSS, pengembang web dapat meningkatkan pengalaman pengguna dengan memberikan umpan balik visual yang jelas selama proses loading berlangsung, sehingga pengguna akan memiliki persepsi yang lebih baik terhadap kecepatan dan responsifitas halaman web tersebut.

Berikut ini adalah cara membuat tampilan loading pada website menggunakan javascript dan html

Guanakan libary jQuery

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>

Tambahkan kode css untuk mempercantik tampilan

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}

Tambahkan kode html untuk menampilkan loading

<div class="preloader">
  <div class="loading">
    <img src="poi.gif" width="80">
    <p>Harap Tunggu</p>
  </div>
</div>

Tambahkan kode javascript untuk menghentikan loading ketika halaman selesai dimuat
```
<script>
$(document).ready(function(){
$(".preloader").fadeOut();
})
</script>
```

Kebingungan untuk meletakan posisi kode? ini adalah contoh full scriptnya

<!DOCTYPE html>
<html>
  <head>
    <title>Preloader</title>
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <style type="text/css">
    .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background-color: #fff;
    }
    .preloader .loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font: 14px arial;
    }
    </style>
<script>
    $(document).ready(function(){
      $(".preloader").fadeOut();
    })
    </script>
  </head>
<body>
    <div class="preloader">
      <div class="loading">
        <img src="poi.gif" width="80">
        <p>Harap Tunggu</p>
      </div>
    </div>
<section>
      <h1>Section #1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
<section>
      <h1>Section #2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
<section>
      <h1>Section #3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </body>
</html>

Salah satu keuntungan menggunakan Preloader CSS adalah meningkatkan persepsi kecepatan halaman web. Dengan menampilkan indikator loading atau animasi yang menarik, pengguna akan merasa bahwa halaman web sedang merespons dan sedang dalam proses pemrosesan. Hal ini dapat mengurangi kebosanan atau kegelisahan yang mungkin dirasakan pengguna saat menunggu konten tampil. Dengan persepsi kecepatan yang lebih baik, pengguna cenderung memiliki pengalaman yang lebih positif dan puas dengan situs web Anda.

Baca Juga

Rekomendasi untuk kamu