You can simply use two divs and adjust the size of the inner div to show progress, as in this example. When the field is edited, the check function is called, which checks the fields and updates the progress bar.
<html>
<head>
<script type="text/javascript">
function check() {
var completion = 0;
if (document.getElementById("field1").value != "") {
completion++;
}
if (document.getElementById("field2").value != "") {
completion++;
}
if (document.getElementById("field3").value != "") {
completion++;
}
document.getElementById("progressbar").style.width = completion*20+"px";
}
</script>
</head>
<body>
<form action="script.aspx" method="GET">
Name: <input type="text" id="field1" onchange="check()" /><br />
Tel No.: <input type="text" id="field2" onchange="check()" /><br />
Email: <input type="text" id="field3" onchange="check()" /><br />
Completion: <div style="width: 60px; height: 10px; border: 1px solid black;">
<div style="width: 0px; height: 10px; background-color: green;" id="progressbar"> </div>
</div>
<input type="submit" />
</form>
</body>
</html>