• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 507
  • Last Modified:

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.
0
DanOBrien57
Asked:
DanOBrien57
  • 2
1 Solution
 
mudbuggleCommented:
What do you have so far? What are you measuring?
0
 
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.
0
 
mudbuggleCommented:
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.
<html>
<head>
<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;
	image.style.left = inc;
	if(obj == 100)
	{
		setTimeout('reset()',1000);
	}
}
 
function process()
{
	//Do Something
	//set progress
	progress(10);
	
	//Do Something else
	//set the progress to something else
	setTimeout('progress(30)',1000);
	
	//Again do something else and set the progress
	setTimeout('progress(60)',3000);
	
	//you get the idea
	setTimeout('progress(80)',3500);
	
	//finished
	setTimeout('progress(100)',4000);
	
}
 
function reset()
{
	var image = document.getElementById('image');
	var percent = document.getElementById('percent');
	percent.innerHTML = '';
	image.style.left = -100;
}
 
</script>
 
<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;
}
</style>
</head>
<body>
<center>
<div class="div">
<img class="img" src="Pictures/prog.bmp" id="image">
<div class="perc" id="percent"></div>
</div>
<br>
<input type="button" value="Click Me" onclick="process();">
</center>
</body>
</html>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now