Loader yang akan dibuat dalam tutorial ini adalah loader yang akan muncul selama halaman masih dalam proses loading untuk meningkatkan interaktifitas pada website. Untuk element utama yang akan digunakan sebagai indikator loader adalah gambar.

Pasti anda adalah salah satu pengguna youtube, tentu saja karena website tersebut terlalu besar untuk dilewatkan. Jika anda tidak tahu, silahkan Anda merefer ke www.youtube.com ,

Pernahkah Anda perhatikan loader yang muncul ketika kita membuka video lainnya di youtube (muncul pada bagian atas halaman)? Ketika kita membuka video lainnya, akan muncul loader berwarna merah yang muncul secara dinamis. Atau untuk lebih mudah, ketika Anda mengakses sidikhanrei.com, Anda akan melihat loader berwarna orange yang muncul pada bagian atas saya. Seperti itulah contoh yang akan kita buat.

Nah kali ini kita akan coba membuat loader tersebut untuk diimplementasikan kedalam website yang kita buat.

Tapi sebelum kita lanjut, sebaiknya Anda mendownload dulu plugins jquery.loadie.js melalui repository github.

Repository : Github
Page : https://github.com/9elements/loadie.js
Download : https://github.com/9elements/loadie.js/archive/master.zip

Jika Anda merupakan jQuery Expert, silahkan buka file index.html yang merupakan contoh yang sudah include ketika Anda download plugin loadie.js tersebut.

Installasi Loadie.js

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

Initialize Loadie.js

$('body').loadie(); // Change the wrapper if wanted.

Update Persentase Loadie.js

Jika proses installasi dan inisialisasi telah berhasil Anda lakukan, saya berikan contoh sederhana untuk mengupdate posisi loader seperti berikut ini :

var percent = 0.74;
$('body').loadie(percent); // Insert your percent as params.<br>

Jika Anda ingin melihat contohnya, silahkan Anda buka file index.html yang telah Anda download dari github.

Customisation Loadie.css

Pastinya setelah kita melihat contoh sederhana dari file yang telah didownload ingin melakukan perubahan untuk disesuaikan dengan website kita. Style dari Loadie.js ini tersimpan pada file css/loadie.css, silahkan Anda buka dan sesuaikan dengan contoh berikut ini :

loadie.css

.loadie {
	position: fixed;	/*Mengatur posisi menjadi fixed*/
	top: 0;
	left: 0;
	background-color: #F90;	/*Warna Loader (Orange)*/
	width: 15%;	/*Inisialisasi Awal panjang loader default*/
	height: 2px;
	/*Box Shadow*/
	/*
	Mengatur bayangan pada loader, 
	silahkan pilih warna yang anda suka dalam bentuk RGB
	*/
	-webkit-transition: width 0.5s ease-out;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(255, 184, 78, 0.5);
	box-shadow: 0px 2px 5px 2px rgba(255, 184, 78, 0.5);
}

Sebenarnya sampai disini saja, Loadie.js telah selesai dan akan berfungsi dengan semestinya. Tapi ada beberapa tambahan yang ingin saya bagikan agar website benar-benar interaktif.

Silahkan bagi Anda untuk berhenti disini jika tidak membutuhkan custom.

Kostumisasi Loadie.js Untuk Interaktivitas

Apa yang akan kita lakukan?

Disini kita akan melakukan kostumisasi agar loadie.js agar dapat berfungsi lebih maksimal. Buatlah sebuah file dengan nama custom.js dan isikan dengan script berikut ini :

custom.js

$(function(){
	var totalItems = $(".loaded-image").size();
	var itemsLoaded = 0;
	$('body').loadie(0.25);
	$(".loaded-image").bind("load", function(){		
		itemsLoaded++;
		$('body').loadie(itemsLoaded / totalItems);
	});
});
$(document).on('click', 'a', function(){
	var HR 		= $(this).attr('href');
	var PL 		= HR.substr(0, 1);
	var TARGET	= $(this).attr('target');
	if(typeof TARGET == "undefined"){
		TARGET = 0;
	}
	if(HR != "javascript:void(0)" && HR != "#" && HR != "javascript:void(0);" && HR != "javascript:;" && PL != "#"){
		if(TARGET != "_blank"){
			$('.loadie').fadeIn();
			$('body').loadie(0.01);
			$('body').loadie(0.35);
		}
	}
});
$(window).load(function(){
	$('body').loadie(1);
});
<br>

Penjelasan :

File custom.js di atas memiliki beberapa fungsi untuk memaksimalkan loadie.js yang akan kita gunakan. Adapun penjelasannya adalah sebagai berikut :

Baris 1-9 fungsi utama loadie.js

• Baris 2 untuk menentukan Total Item yang ada dalam halaman dengan metode $(selector).size();, karena kali ini kita menggunakan class .loaded-image jadi silahkan sesuaikan selector tersebut.
• Baris 3 untuk menentukan default total item yang sudah di load (default 0).
• Baris 4 adalah untuk mengatur panjang baris awal sebesar 25% (0.25).
• Baris 5-7 digunakan untuk mengeksekusi trigger load dari selector (.loaded-image) dan variable itemLoaded akan di increase pada baris ke-6, dan perhitungan persentase panjang loader dilakukan pada baris ke-7 dengan rumus kalkulasi itemsLoaded / totalItems.

Baris 10-24 digunakan untuk menyisipkan trik agar lebih interaktif dengan mengatur panjang loader ketika sebuah link aktif di klik oleh user dimana atribut target != "_blank". Untuk contohnya silahkan klik pada salah satu link pada web saya untuk melihat fungsinya (loader akan muncul sepanjang 35% sebelum page benar-benar berpindah).

Baris 25-27 adalah trik script yang kita gunakan untuk menentukan panjang loader adalah 100% (complete). Mengapa baris ini dibutuhkan, karena pada kenyataannya, browser sering tidak konsisten menghitung total proses yang sudah selesai. Tergantung pada memori dan browser client yang mengaksesnya. Jadi script ini digunakan untuk memberikan solusi terhadap masalah tersebut.

Sekian dulu dari saya untuk tutorial membuat page loader menggunakan plugins loadie.js ini. Jika ada pertanyaan dan untuk saling berbagi, silahkan berikan komentar anda dibawah ini.

Salam.