Here’s a quick and obvious-in-hindsight progress bar that I created while working on a project:
<div id="progress" style="border: 1px solid black;"> <div style="background-color:green; width:50%"> </div> </div>
Of course there can be any number of variations on this theme. For example, a repeating background-image can give a nice effect.
Or how about a discrete bar instead with say, five stars? Just use five image tags, then if you have these image elements in the array ‘stars’:
progress = Math.round (progress/20); //progress was a percentage
for (i =0; i < progress; i++) stars[i].src = "filled_star.gif"; for (i = progress; i < 5; i++) stars[i].src = "empty_star.gif"; [/sourcecode]