HTML Progress Bar Percent

I want to do a progress bar using HTML. I have two images, like an old thermometer--one empty and one full. These are overlapped, and the full one grows from 0 to 100% as the procedure advances, filling up the tube. They are oriented horizontally. The hard part: I also want to show the percent complete in the center, on top of the images.
Who is Participating?
It took a little time to throw this together. It's pretty simple and should be self explanatory. If you have any questions let me know.
<script language="javascript" type="text/javascript">
function progress(obj)
	var image = document.getElementById('image');
	var percent = document.getElementById('percent');
	percent.innerHTML = obj + '%';
	inc = obj - 100; = inc;
	if(obj == 100)
function process()
	//Do Something
	//set progress
	//Do Something else
	//set the progress to something else
	//Again do something else and set the progress
	//you get the idea
function reset()
	var image = document.getElementById('image');
	var percent = document.getElementById('percent');
	percent.innerHTML = ''; = -100;
<style type="text/css">
.div {
	width : 102px;
	height : 18px;
	overflow : hidden;
	border : 1px solid;
.img {
	position : relative;
	left : -100px;
.perc {
	color : #CCC000;
	width : 100px;
	height : 18px;
	position : relative;
	top : -21px;
	font-weight : bold;
<div class="div">
<img class="img" src="Pictures/prog.bmp" id="image">
<div class="perc" id="percent"></div>
<input type="button" value="Click Me" onclick="process();">

Open in new window

What do you have so far? What are you measuring?
DanOBrien57Author Commented:
I have the two images. I'm measuring the duration of a server process that periodically updates the client. I use AJAX to provide real-time updates. That part works. I just need an HTML solution for animating the two images and showing the percent complete text layered above the images.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.