Berikut adalah cara membuat Loading Bar seperti yg ada pada website www.aditif.net. Seperti halnya yang sekarang juga sering kalian lihat loading bar di Youtube, ada banyak cara yang bisa digunakan.
Kita bisa membuat Loading berupa Progress Bar secara Real-Time sesuai dengan kenyataan Loading web saat diakses oleh visitor. Skrip yang digunakan bisa menggunakan bantuan Javascriptatau yang lebih kompleks menggunakan JQuery dan sejenisnya, dibantu dengan sedikit kode desain CSS untuk pewarnaan.
OK, langsung kita pelajari apa saja yang harus kita lakukan dari awal sampai akhir pembuatan Loading dengan Progress Bar ini.
1. Pasang kode ini diantara <head> </head> pada kode Header HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){$("html").removeClass("v2");
$("#header").ready(function(){
$("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){
$("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){
$(this).remove();
});
});
});
})(jQuery);
</script>
Kode Javascript tersebut terdiri dari kode JQuery yang kita ambil dari ajax.googleapis.com secara online. Kamu akan gagal total jika mencoba secara offline.
<style type="text/css" media="all">
#loading {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 10px;
line-height: 350px;
text-align: center;
padding-top:70px;
font:bold 50px Calibri,Arial,Sans-Serif;
color: #0000ff;
}
.v2 #loading {
display: none
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color:rgba(0,0,200,0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
width: 0;
height: 10px;
}
#loader {
top:0;
left:0;
width:100%;
height: 10px;
position:fixed;
display: block;
color:#FFCC66;
background: #ffffff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
</style>
Kode CSS diatas digunakan untuk desain background warna agar terlihat saat pengunjung melakukan akses website. Bedakan warna Progress Bar dengan background warna header web-muagar Progress Bar terlihat saat web sedang Loading.
2. Kode HTML yang digunakan untuk menampilkan desain warna Loading ini dipasang pada bagian <body>
<div id='loading'><div id='progress-bar'></div><div id='loader'></div></div>
Nah Selesai, silahkan coba akses.
Penampakan Lengkap kode halaman website dengan Loading Bar adalah sebagai berikut.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tes Loading dengan Progress Bar Aditif</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){$("html").removeClass("v2");
$("#header").ready(function(){
$("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){
$("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){
$(this).remove();
});
});
});
})(jQuery);
</script>
<style type="text/css" media="all">
#loading {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 10px;
line-height: 350px;
text-align: center;
padding-top:70px;
font:bold 50px Calibri,Arial,Sans-Serif;
color: #0000ff;
}
.v2 #loading {
display: none
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color:rgba(0,0,200,0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
width: 0;
height: 10px;
}
#loader {
top:0;
left:0;
width:100%;
height: 10px;
position:fixed;
display: block;
color:#FFCC66;
background: #ffffff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
</style>
</head>
<body style="background-color:green;">
<div id='loading'><div id='progress-bar'></div><div id='loader'></div></div>
<h1 align="center" style="color:white;">Contoh Loading ini terlihat jelas ketika web anda atau jaringan sedikit agak berat</h1>
</body>
</html>
Bagi kamu yang ingin mencoba secara OFFLINE alias tidak terhubung dengan Internet bisa melakukan download file Jquery https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsdan mengganti link JQuery pada header diatas dengan link file JQuery lokal.