<html>
<head>
<style type="text/css">
/*#pwidget
{
background-color:lightgray;
width:254px;
padding:2px;
-moz-border-radius:3px;
border-radius:3px;
text-align:left;
border:1px solid gray;
}*/
#progressbar
{
width:30px;
padding:1px;
background-color:white;
border:1px solid black;
height:10px;
}
#indicator
{
width:0px;
background-image:url("shaded-green.png");
height:10px;
margin:0;
}
/*#progressnum
{
text-align:center;
width:250px;
}*/
</style>
<script type="text/javascript">
function disp_text()
{
var w = document.myform.mylist.selectedIndex;
//alert(w);
var selected_text = document.myform.mylist.options[w].value;
return selected_text;

}

function disp_text1()
{
var x = document.myform1.mylist1.selectedIndex;
//alert(x);
var second_selected_text = document.myform1.mylist1.selectedIndex;
//alert(second_selected_text);
return second_selected_text;
}


var maxprogress = 30 ; // total to reach
var actualprogress = 0; // current value
var itv = 0; // id to setinterval
function prog()
{

var val = disp_text();
var temp = val;
val = maxprogress;
maxprogress = temp;
if(actualprogress >= maxprogress)
{
clearInterval(itv);
return;
}

var progressnum = document.getElementById("progressnum");
var indicator = document.getElementById("indicator");
actualprogress += 1;
indicator.style.width=actualprogress + "px";
progressnum.innerHTML = actualprogress;
if(actualprogress == maxprogress) clearInterval(itv);
}
</script>
</head>
<body>

<table width="100%">
<tr>
<td width="117"><div id="progressbar">
<div id="indicator"></div>
</div></td>
<td width="78"><div id="pwidget">
<div id="progressnum">0</div>
</div></td>
<td width="288">&nbsp;
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()" class="foo">
<OPTION VALUE="">Select</OPTION>
<OPTION VALUE="30">Raghu</OPTION>
<OPTION VALUE="45">Vara</OPTION>
<OPTION VALUE="60">Sashi</OPTION>
</SELECT>
</FORM></td></tr><tr>
<td width="117"><div id="progressbar">
<div id="indicator"></div>
</div></td>
<td width="78"><div id="pwidget">
<div id="progressnum">0</div>
</div></td><td>
<FORM NAME="myform1">
<SELECT NAME="mylist1" onChange="disp_text1()" class="foo">
<OPTION VALUE="">Select</OPTION>
<OPTION VALUE="30">Raghu</OPTION>
<OPTION VALUE="45">Vara</OPTION>
<OPTION VALUE="60">Sashi</OPTION>
</SELECT>

</FORM>

<input type="button" name="Submit" value="Start the progression" onClick="itv = setInterval(prog, 70)" />
</td>
<td width="520">&nbsp;<input type="button" name="Submit2" value="Stop" onClick="clearInterval(itv)" /></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>