Ads by Yasya El Hakim
Menampilkan Animasi Loading atau Progress Bar Ketika Halaman Masih Dimuat Hanya dengan JavaScript

Banyak yang bertanya kepada saya 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 saya khususnya bagi pengguna Blogger dan tidak jarang seseorang yang masih belajar atau awam tentang HTML, CSS, maupun JavaScript.

Disini, saya 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 (Tanpa jQuery) 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: Saya hanya akan menampilkan tutorial maupun kode dalam bentuk HTML, CSS, dan JavaScript. Bagi pengguna blogger yang ingin memasang Preloader atau Loader seperti yang akan saya tunjukkan, kalian bisa mengkreasikannya sendiri.



Membuat Loader dengan JavaScript

Sebelumnya, Kalian harus membuat file HTML dan CSS terlebih dahulu, berikut adalah contoh simpel dokumen HTML beserta kode CSS nya:

Buat file bernama index.html, berikut adalah contoh kode untuk file index.html:

<!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, berikut adalah contoh kode untuk file style.css:

.loading-halaman::before {
    content: " ";
    display: block;
    position: fixed;
    z-index: 10;
    height: 3px;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #1a73e8;
    animation: load-halaman ease-out 2s;
}

@keyframes load-halaman {
    from {
        width:0;
    }
    to {
        width:100%;
    }
}


Pada contoh kode CSS diatas, animasi loadng akan berjalan dari 0% sampai 100%. Pada tutorial ini, saya akan menunjukkan tiga cara dan animasi yang sama tapi tidak serupa dan kalian dapat memilih untuk menggunakan salah satunya.

Catatan: Buatlah file index.html dan style.css dalam 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 saya tunjukkan adalah untuk menambahkan event handler ketika kalian mengeklik setiap link yang ada pada halaman. Jika alian mengeklik link, maka secara otomatis akan menambahkan Class kedalam body dan akan menampilkan progress bar seperti contoh di bawah ini:

Berikut adalah contohnya:


Catatan: Untuk contoh loader diatas, aslinya hanya sampai 100%. Sebagai contoh, animasinya akan terus berulang-ulang.

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 saya agak sedikit aneh. Mengapa? Jika halaman dimuat lebih dari 3 detik, kemudian animasinya hilang secara otomatis, menurut saya 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 saya 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 saya 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;
    animation: load-halaman infinite ease-out 2s;
    box-shadow:0 2px 2px rgba(0,0,0,.2);
}

@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 saya sendiri hanya dengan menggunakan JavaScript (tanpa jQuery). Kalau bicara tentang progress bar yang mirip seperti EL Creative Academy, sebagai bocorannya, saya menggunakan cara nomor 2 dan 3.

Bagi pengguna blogger, tutorial ini sengaja saya buat bukan untuk blogger, tetapi kalian tetap bisa menggunakannya dengan kreasi kalian sendiri (Saya hanya memberikan kunci pintu, tetapi tidak memberikan cara membuka pintu dengan kunci tersebut). Silahkan dikreasikan sesuai kebutuhan dan jika belum paham, silahkan tuliskan di kolom komentar. Terimakasih.

0Komentar

Sebelumnya Selanjutnya