Menampilkan Animasi Loading atau Progress Bar
Banyak yang bertanya kepada penulis tentang cara membuat Progress Bar, Loader, atau animasi Pre-Loader pada HTML dengan menggunakan JavaScript seperti yang ada di EL Creative Academy atau website lainnya. Pertanyaan itu sangat sering dilontarkan kepada penulis khususnya bagi pengguna Blogger dan tidak jarang seseorang yang masih belajar atau awam tentang HTML, CSS, maupun JavaScript.
Disini, penulis akan menunjukkan cara untuk membuat Loader yang mungkin agak berbeda dengan tutorial yang ada di website lain. Ketika kalian mengeklik link, maka kalian akan melihat Loader. Fitur ini hanya menggunakan JavaScript (Vanilla/Pure JavaScript) dan sangat berguna sekali bagi pengguna atau user untuk mengetahui apakah halaman tersebut sudah dimuat secara keseluruhan atau belum. Jadi, mari langsung saja kita mulai.
Catatan: Penulis hanya akan menampilkan tutorial maupun kode dalam bentuk HTML, CSS, dan JavaScript. Bagi pengguna Blogger yang ingin memasang Pre-Loader atau Loader seperti yang akan penulis tunjukkan, kalian bisa mengkreasikannya sendiri.
Daftar Isi
Membuat Loader dengan JavaScript
Sebelumnya, Kalian harus membuat file HTML dan CSS terlebih dahulu, berikut adalah contoh dokumen HTML sederhana beserta kode CSS nya:
Buat file bernama index.html dan masukkan kode berikut kedalamnya:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Loader | EL Creative Academy</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<a href="/">Link Tujuan</a>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
Buat file bernama style.css dan masukkan kode berikut kedalamnya:
.loading-halaman::before {
content: " ";
display: block;
position: fixed;
z-index: 10;
height: 3px;
width: 100%;
top: 0;
left: 0;
background-color: #1a73e8;
-webkit-animation: load-halaman ease-out 2s;
animation: load-halaman ease-out 2s;
}
@-webkit-keyframes load-halaman {
from {
width:0;
}
to {
width:100%;
}
}
@keyframes load-halaman {
from {
width:0;
}
to {
width:100%;
}
}
Pada contoh kode CSS diatas, animasi loading akan berjalan dari 0% sampai 100%. Pada tutorial ini, penulis akan menunjukkan tiga cara dengan animasi yang sama tapi tidak serupa dan kalian dapat memilih untuk menggunakan salah satunya.
Catatan: Buatlah fileindex.htmldanstyle.cssdalam satu folder. Jika kalian sudah paham tentang HTML, CSS, dan JavaScript, kalian bisa mengkreasikannya sendiri.
Membuat Loader Ketika Link di Klik, Maka Loader akan Muncul
Cara pertama yang akan penulis tunjukkan adalah untuk menambahkan Event Handler ketika kalian mengeklik setiap link yang ada pada halaman. Jika kalian mengeklik link, maka secara otomatis akan menambahkan class kedalam elemen body dan akan menampilkan progress bar seperti contoh di bawah ini:
Catatan: Contoh loader diatas sebenarnya hanya sampai 100%. Sebagai contoh, animasinya akan terus berulang-ulang (Looping).
Untuk membuatnya, buatlah satu file dan beri nama script.js (pada folder yang sama dengan index.html dan style.css). Masukkan kode berikut kedalam script.js:
var links = document.getElementsByTagName("a"),
i = 0,
l = links.length,
body = document.body;
for (; i < l; i++) {
links[i].addEventListener("click", function() {
body.className = "loading-halaman";
}, false);
}
Kode diatas akan bekerja secara sempurna. Tetapi, jika kalian memiliki Anchor tag (seperti Table of Content yang tidak berpindah halaman), maka animasinya Loading Bar nya akan tetap berada di sisi atas dan tetap dalam keadaan 100%. Jika demikian, kalian bisa menggunakan cara kedua.
Membuat Loader Ketika Link di Klik, Maka Loader akan Muncul kemudian Menghilang
Cara ini adalah solusi bagi kalian yang memiliki anchor tag/link seperti Table of Content (ToC). Disini, ketika link di klik, maka animasi progress bar nya akan muncul dari 0% sampai 100% kemudian menghilang secara otomatis selama 3 detik.
Contohnya akan seperti contoh sebelumnya, tetapi ketika mencapai 100%, maka progress bar nya akan menghilang secara otomatis.
Hapus semua kode yang ada pada file script.js dan ubahlah dengan kode berikut:
var links = document.getElementsByTagName("a"),
i = 0,
l = links.length,
body = document.body;
for (; i < l; i++) {
links[i].addEventListener("click", function() {
body.className = "loading-halaman";
setTimeout(function() {
body.className = "";
}, 3000);
}, false);
}
Cara ini tentu saja akan bekerja secara sempurna. Tetapi, menurut penulis agak sedikit aneh. Mengapa? Jika halaman dimuat lebih dari 3 detik, kemudian animasinya hilang secara otomatis, menurut penulis itu bisa membingungkan pengguna/user. Selain itu, jika halaman sudah dimuat kurang dari 3 detik tetapi progress bar atau loader nya masih muncul, maka pengguna juga bisa bingung. Nah, disini penulis memiliki solusi lain yang bisa terlihat semakin unik dan keren.
Membuat Loader Ketika Link di Klik, Maka Loader akan Berganti Warna dengan Event onbeforeunload
Cara yang terakhir ini adalah solusi yang paling elegan. Menambahkan Event Handler pada setiap link yang ada pada halaman, menurut penulis agak keterlaluan dan kebanyakan. Nah, pada cara yang ketiga ini, kita bisa menggunakan satu Event Handler saja dengan onbeforeunload kedalam halaman. Ketika user mengeklik link, kita dapat menambahkan progress/loading bar kedalam halaman.
Berikut adalah contohnya:
Buka file script.js, hapus semua kode yang ada didalamnya dan ubah dengan kode berikut:
window.addEventListener("beforeunload", function(e) {
document.body.className = "loading-halaman";
}, false);
Pada kode diatas, kita tidak perlu mengatur waktu timeout pada progress bar karena progress bar tersebut akan hilang secara otomatis pada halaman selanjutnya ketika sudah siap untuk dimuat.
Eits, jangan senang dulu. Disini kita perlu mengubah kode CSS agar animasinya berubah menjadi berganti warna secara otomatis.
Buka file style.css, hapus semua kode yang ada di dalamnya dan ubah dengan kode berikut:
.loading-halaman::before {
content:" ";
display:block;
position:fixed;
z-index:10;
height:2px;
width:100%;
top:0;
left:0;
background-color: #1a73e8;
-webkit-animation: load-halaman infinite ease-out 2s;
animation: load-halaman infinite ease-out 2s;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
box-shadow:0 2px 2px rgba(0,0,0,.2);
}
@-webkit-keyframes load-halaman {
from {
background-color: #ffc422;
}
to {
background-color: #c0392b;
}
}
@keyframes load-halaman {
from {
background-color: #ffc422;
}
to {
background-color: #c0392b;
}
}
Itulah beberapa contoh cara untuk membuat pre-loader, progress bar, atau preloader dengan cara penulis sendiri hanya dengan menggunakan Vanilla JavaScript. Kalau bicara tentang progress bar yang mirip seperti EL Creative Academy, sebagai bocorannya, penulis menggunakan cara nomor 2 dan 3.
Bagi pengguna blogger, tutorial ini sengaja penulis buat bukan untuk blogger, tetapi kalian tetap bisa menggunakannya dengan kreasi kalian sendiri (Penulis hanya memberikan kunci pintu, tetapi tidak memberikan cara membuka pintu dengan kunci tersebut). Silahkan di kreasikan sesuai kebutuhan dan jika belum paham, silahkan tuliskan di kolom komentar. Terimakasih.
AnandNawal