Menampilkan Progress Bar pada Website Ketika Memuat Halaman

Untuk menambahkan progress bar pada halaman website dapat digunakan Pace.js. Download file pace.min.js atau pace.js dan tema loading bar yang diinginkan pada situs resmi Pace. Masukkan kedua file tersebut dalam folder website untuk dipanggil, Lalu pada halaman website tambahkan kedua file tersebut pada bagian <head>. Pada artikel ini penulis menggunakan tema loading bar:

<head>  
<!--Pace loading bar-->  
<script type="text/javascript" src="../pace.js"></script>  
<link rel="stylesheet" type="text/css" href="../loading_bar.css">  
</head>

File pace.js merupakan library javascript yang berfungsi untuk menampilkan progress bar, sedangkan loading_bar.css adalah tema atau bentuk loading bar yang akan ditampilkan pada halaman ketika sedang memuat data. Sekarang jalankan website untuk melihat apakah pace sudah terinstall atau belum.
alt Untuk membuat halaman tidak tampil sampai progress bar selesai maka pada file tema loading_bar.css tambahkan:

.pace-running > :not(.pace) {
  opacity: 0;
}

.pace-done > :not(.pace) {
  opacity: 1;
  transition: opacity .5s ease;
}

Jika ingin menambah logo atau gambar di atas loading bar maka edit file loading_bar.css:

/*edit height pada .pace*/
.pace {
z-index: 2000;  
  position: fixed;
  margin: auto;
  top: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 250px;
  overflow: hidden;
}

Penulis menambah height menjadi 250px. Ini berfungsi agar posisi gambar background menjadi lebih ke atas ketika dipanggil. Selanjutnya panggil gambar dengan:

/*tambah pada pace.*/
.pace {
background-image: url(../gambar.png);  
background-size: 200px 60px;  
background-repeat: no-repeat;  
background-position: center top;  
}

Gambar dipanggil dengan menggunakan background-image, background-size berfungsi untuk menentukan ukuran gambar, background-repeat: no-repeat agar gambar tidak tampil secara berulang-ulang, background-position: center top agar gambar tampil pada bagian atas background pace. Jika website dijalankan maka gambar akan tertimpa oleh loading bar. Hal ini terjadi karena loading bar belum diturunkan posisinya. Ubah lagi file CSS agar tampilan menjadi rapi:

/*tambah pada pace.*/
.pace {
padding-top: 65px;  
}

/*tambah pada .pace .pace-progress*/
.pace .pace-progress {
margin-top: 65px;  
}

Sekarang jalankan website.
alt Untuk properti gambar bisa Anda sesuaikan sendiri sesuai dengan keinginan, seperti ukurannya dan posisinya. Edit file CSS dan ubah pada bagian .pace dan .pace .pace-progress seperti pada contoh.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.