Web Sayfalarında Kullanılabilecek "Progress Bar" Örneği

Progress Bar'lar bir işlem sırasında kullanıcıya işlemin ne kadarlık kısmının gerçekleştiği bilgisini vermek için kullanılan görsel bir araçtır. Bir kutu soldan sağa doğru giderek büyür. Tamamlandığında işlem bitmiş demektir.

Progress Bar için bir tablo yaratıyoruz. Bu tabloda tek satır ve bu satırda iki hücre var. İlk hücre soldan sağa doğru işlemi gösteren "bar" hücresi, diğer hücre ise boş olan hücre. İlk hücreye bir background veriyoruz ve zaman geçtikte bu hücrenin genişliğini arttırıyoruz. Bu genişlik tüm tabloyu kapladığında işlem bitmiş oluyor.

Zafer Teker

tekzaf@yahoo.com

  1 <html>
  2 <head>
  3 <style>
  4 	.progressBar{
  5 		width:100px;
  6 		border-style:solid;
  7 		border-color:blue;
  8 		border-width:1px;
  9 	}
 10 	.progressBar table{
 11 		width:100%;
 12 	}	
 13 	.bar{
 14 		background:red;
 15 		height:10px;
 16 		width:80%;
 17 	}
 18 	.empty{
 19 		background:white;
 20 		height:10px;
 21 		width:20%;
 22 	}
 23 }
 24 </style>
 25 <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
 26 	var isFinish=false;
 27 	var barSize=0;
 28 	var emptySize=100;	
 29 	function progress(refreshTime){
 30 		if(!isFinish){		
 31 			var bar=document.getElementById("bar");
 32 			var empty=document.getElementById("empty");
 33 			bar.style.width=barSize+"%";					
 34 			empty.style.width=emptySize+"%";
 35 			barSize+=1;
 36 			empty-=1;
 37 			if(barSize==102){
 38 				isFinish=true;
 39 				finish();
 40 			}
 41 			setTimeout("progress("+refreshTime+")",refreshTime);
 42 		}
 43 	}
 44 	function start(time){
 45 			var refreshTime=time/100;
 46 			progress(refreshTime);
 47 	}
 48 	function finish(){
 49 		alert("Finish");
 50 	}
 51 </SCRIPT>
 52 </head>
 53 <body onLoad="start(30000)">
 54 	<table class="progressBar" cellpadding=1 cellspacing=0>
 55 	<tr>
 56 	<td>
 57 		<table cellpadding=0 cellspacing=0>
 58 		<tr>
 59 			<td class="bar" id="bar"></td>
 60 			<td class="empty" id="empty"></td>	
 61 		</tr>
 62 		</table>
 63 	</td>	
 64 	</tr>		
 65 	</table>	
 66 </body>
 67 </html>

Sayfa yüklenir yüklenmez start() fonksiyonu çağrılmaktadır. 30000 ms cincinden verilmektedir. 30000 ms 30 saniyeye karşılık gelir. Yani otuz saniye içinde işlem tamamlanacaktır.

Progress Bar 100 parça olarak düşünülmektedir. Yani gelişme işini 100 kere yapacaktır. 30000 'i 100'e bölüp her adımı kaç ms'de bir yapması gerektiğini buluyoruz. Her adımda genişlik %1 arttırılıyor.

ile iki td'nin genişliğini değiştiriyoruz. barSize her adımda 1 arttırılırken , emptySize 1 azaltılır. Bu şekilde Progress Bar görüntüsü elde edilmiş olur.

Web Sayfalarında Kullanılabilecek "Progress Bar" Örneği

Dosya Listesi