Assalamualakum
Dalam sebuah aplikasi kerap dijumpai adanya sebuah progress bar tidak terkecuali dengan pemrograman Web. Progress bar biasanya digunakan untuk menampilkan loading atau sebuah proses yang sedang berjalan. Dalam tutorial kali ini kita akan mempelajari bagaimana membuat sebuah progress bar pada pemrograman web tetapi bukan sembarang progress bar tetapi progress bar yang menggunakan Jquery.
Sebelum masuk ketutorial alangkah lebih bagusnya untuk mengetahui terlebih dahulu apa itu Jquery. Jquery adalah sebuah library tambahan pada javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML atau PHP, yang menangani event, animasi, efek dan memproses interaksi ajax. Jquery dirancang sedemikian rupa supaya membuat program menggunakan Javascipt menjadi relative dan sangat mudah.
Tutorial kali ini hanya akan menampilkan salah satu contoh progress bar menggunakn Jquery.
Pertama siapkan Jquery. Jquery yang digunakan adalah versi jquery-1.10.2
Kedua siapkan css nya untuk tampilan seperti dibawah dengan nama style.css
body{margin:0;padding:0;background:#eeeeee;font-family: 'lucida grande',sans,verdana,arial,sans-serif;font-size:14px;color:#555555;}
h1{
font-weight: normal;
text-align: center;
position: relative;
}
h1 sub{
font-size: 12px;
position: absolute;
bottom:3px;
}
#konten{
background-color: #ffffff;
padding:10px 5px;
width:400px;
margin: 0 auto;
margin-top:20px;
position:center;
}
a{
border:1px solid #bbb;
background-color: #eeeeee;
cursor: pointer;
padding:0px 5px;
position: relative;
}
a:after{
content:"";
position: absolute;
top:0px;
bottom:0px;
right:-10px;
border-left:10px #eeeeee solid;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
a:before{
content:"";
position: absolute;
top:-1px;
bottom:-1px;
right:-11px;
border-left:11px #bbb solid;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
button{
border:1px solid #ccc;
background-color: #eeeeee;
cursor: pointer;
}
#progress{
background-color: #f5f5f5;
border:1px solid #ccc;
margin: 10px 0px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 15px;
}
#progress p{
text-align: center;
font-weight: bold;
margin:0;
padding:3px 0px;
width:0;
max-width: 100%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.bgColor1{
background-color: #5C5af9;
color:#ffffff;
}.bgColor2{
background-color: #4368da;
color:#ffffff;
}.bgColor3{
background-color: #43b6da;
color:#ffffff;
}
h1{
font-weight: normal;
text-align: center;
position: relative;
}
h1 sub{
font-size: 12px;
position: absolute;
bottom:3px;
}
#konten{
background-color: #ffffff;
padding:10px 5px;
width:400px;
margin: 0 auto;
margin-top:20px;
position:center;
}
a{
border:1px solid #bbb;
background-color: #eeeeee;
cursor: pointer;
padding:0px 5px;
position: relative;
}
a:after{
content:"";
position: absolute;
top:0px;
bottom:0px;
right:-10px;
border-left:10px #eeeeee solid;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
a:before{
content:"";
position: absolute;
top:-1px;
bottom:-1px;
right:-11px;
border-left:11px #bbb solid;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
button{
border:1px solid #ccc;
background-color: #eeeeee;
cursor: pointer;
}
#progress{
background-color: #f5f5f5;
border:1px solid #ccc;
margin: 10px 0px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 15px;
}
#progress p{
text-align: center;
font-weight: bold;
margin:0;
padding:3px 0px;
width:0;
max-width: 100%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.bgColor1{
background-color: #5C5af9;
color:#ffffff;
}.bgColor2{
background-color: #4368da;
color:#ffffff;
}.bgColor3{
background-color: #43b6da;
color:#ffffff;
}
Terakhir buat kodingan PHP nya seperti dibawah dengan nama index.php
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="mmlpro" />
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript">
$(function(){
var progress=$("#progress");
var kontentProgress=$("#progress p");
var button=$("button");
var runaway=$(".run");
var timer=null;
//jalankan otomatis
runaway.click(function(){
var i;
i=0;
function tambahProgress(){
i++;
kontentProgress.css({"width":i+"%"}).text(i+"%");
bgcolor(i);
timer=setTimeout(tambahProgress, 50);
if(i==100){
clearTimeout(timer);
kontentProgress.text("Loading selesai");
}
}
timer=setTimeout(tambahProgress, 50);
});
//jika button diklik
button.click(function(){
clearTimeout(timer);
var nilaiPersen=$(this).val();
kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
bgcolor(nilaiPersen);
});
//pengaturan bacground dan warna
function bgcolor(nilai){
if(nilai<35){
kontentProgress.removeClass();
kontentProgress.addClass("bgColor1");
}else if(nilai>35 && nilai<60){
kontentProgress.removeClass();
kontentProgress.addClass("bgColor2");
}else if(nilai>60 && nilai<=100){
kontentProgress.removeClass();
kontentProgress.addClass("bgColor3");
}
}
});
</script>
<title>desain progress</title>
</head>
<body>
<div id="konten">
<a class="run">Run</a>
<div id="progress"><p>0%</p></div>
</div>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="mmlpro" />
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript">
$(function(){
var progress=$("#progress");
var kontentProgress=$("#progress p");
var button=$("button");
var runaway=$(".run");
var timer=null;
//jalankan otomatis
runaway.click(function(){
var i;
i=0;
function tambahProgress(){
i++;
kontentProgress.css({"width":i+"%"}).text(i+"%");
bgcolor(i);
timer=setTimeout(tambahProgress, 50);
if(i==100){
clearTimeout(timer);
kontentProgress.text("Loading selesai");
}
}
timer=setTimeout(tambahProgress, 50);
});
//jika button diklik
button.click(function(){
clearTimeout(timer);
var nilaiPersen=$(this).val();
kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
bgcolor(nilaiPersen);
});
//pengaturan bacground dan warna
function bgcolor(nilai){
if(nilai<35){
kontentProgress.removeClass();
kontentProgress.addClass("bgColor1");
}else if(nilai>35 && nilai<60){
kontentProgress.removeClass();
kontentProgress.addClass("bgColor2");
}else if(nilai>60 && nilai<=100){
kontentProgress.removeClass();
kontentProgress.addClass("bgColor3");
}
}
});
</script>
<title>desain progress</title>
</head>
<body>
<div id="konten">
<a class="run">Run</a>
<div id="progress"><p>0%</p></div>
</div>
</body>
</html>
berikut adalah hasilnya:
Untuk demo bisa dilihat disini.
Jika tidak ingin sulit membuat semua filenya tinggal download disini.