Bar Timer

The following is an example of how to create a progress bar governed by time.
For this example the progress bar is increased every second.
The length of the progress bar is 600 pixels and the time limit is 1 minite

 
 
Position = 0 Time Left = 0 Progress = 0%

The progress bar can be made any width and the time period any length.
The script automatically calculates the number of steps that are required in order for the progress bar to increment to the end in your given time.

The example progress bar is made up of 2 layers. One for the progression indicator and a second layer to add a background colour.
The background layer is made the same height as the indicator layer and the same width that the indicator layer is going to travel.
Both layers are placed in exactly the same position.
The indicator layer is given a higher z-index than the background layer effectively placing the indicator layer on top.

Please be aware of the following.
The smallest distance a layer can be moved is 1 pixel.
If the step size is less than 1 pixel the layer will not progress until the next full pixel is reached.
Step size is calculated by dividing the distance to travel by the time limit so if the step size equals 0.3 pixels it will be 4 seconds before the indicator moves (1pixels / 0.3 pixels = 3.3333 seconds to move 1 pixel). 

<script type="text/javascript">

<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

timeLimit=60 // set time in seconds
distance=600 // set distance in pixels
stepSize=distance / timeLimit // calculates step size
Width=0
count=0

IE=document.all

function startme(){
if(!IE){
document.getElementById("progress_bar").innerHTML="&nbsp;"
}
Width+=(stepSize*1) // add stepSize to position
document.getElementById("progress_bar").style.width=Width // layers current width
timerID = setTimeout("startme()",1000) // advance every 1 second

count++ // add 1,  text display
document.getElementById("show_bar_position").innerHTML="Position = "+parseInt(Width) // text display
document.getElementById("show_time_left").innerHTML="Time Left = "+(timeLimit-count) // text display
perc=Math.ceil(Width/distance*100)
document.getElementById("show_dist_left").innerHTML="Progress = "+perc+"%"
document.f1.b1.disabled=true // disable start button

if(Width>distance-stepSize){
clearTimeout(timerID) // stop when limit reached
Width= -stepSize // reset position
count= -1 // reset counter,  text display
document.f1.b1.disabled=false // enable button
}
}
//-->
</script> 

<div style="position:relative">
<div id="bg_layer" style="position:absolute;left:0;top:0;width:600px;background-color:#8e8462;font-size:10px"></div>
<div id="progress_bar" style="position:absolute;left:0;top:0;width:0;background-color:#c9bda9;z-index:2;font-size:10px"></div> 
<form name="f1">
<input type="button" name="b1" value="Start" onclick="startme()">
</form>
</div>