Gradient Progress Bar

This is a very simple DHTML trick that just moves a white div element one pixel to the left and reduces its width by one pixel to reveal a div beneath it with a gradient image set as its background-image. It's just running on an interval now for the purpose of demonstration, but could easily be tied into something like the Image Load Progress Bar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>slayeroffice | gradient progress bar</title>
<style type="text/css">

body {
	font-family:verdana;
	font-size:9px;
}

h1 {
	font-family:arial;
	font-size:10pt;
	font-weight:bold;
}

#mContainer {
	position:relative;
	width:200px;
	height:15px;
	padding:0px;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
}

#gradient {
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	height:15px;
	background-image:url("gradient.gif");
	background-repeat:no-repeat;
}

#mask {
	position:absolute;
	font-size:1px;
	width:200px;
	height:15px;
	background-color:#FFFFFF;
	left:0px;
	top:0px;
}

#progressIndicator {
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	height:15px;
	font-family:verdana;
	font-weight:bold;
	color:#C0C0C0;
	font-size:10pt;
	text-align:center;
}

.btn {
	font-family:verdana;
	font-size:9px;
	border:1px solid #000000;
	margin-top:5px;
}

pre {
	background-color:#FAFAFA;
	border:1px solid #C0C0C0;
	padding:5px;
	font-family:verdana;
	font-size:9px;
}
</style>

<script language="javascript" type="text/javascript">

var mInterval;

function startProgressBar() {
	reset();
	mInterval = setInterval("doProgress()",10);
}

function reset() {
	document.getElementById("mask").style.left = "0px";
	document.getElementById("mask").style.width = document.getElementById("mContainer").offsetWidth + "px";
	document.getElementById("progressIndicator").style.zIndex  = 10;
	document.getElementById("mask").style.display = "block";
	document.getElementById("progressIndicator").innerHTML = "0%";
}

function doProgress() {
	curWidth = parseInt(document.getElementById("mask").offsetWidth);
	curLeft = parseInt(document.getElementById("mask").offsetLeft);
	curWidth --;
	curLeft ++;

	if(curLeft ==201) {
		clearInterval(mInterval);
		document.getElementById("mask").style.display = "none";
		return;
	}


	document.getElementById("mask").style.left = curLeft + "px";
	if(parseInt(document.getElementById("mask").offsetWidth)>10)document.getElementById("mask").style.width = curWidth + "px";
	document.getElementById("progressIndicator").innerHTML = Math.floor((curLeft / parseInt(document.getElementById("gradient").offsetWidth))*100) + "%";

}
</script>

</head>
<body>
<h1>Gradient Progress Bar</h1>
<div id="mContainer">
	<div id="gradient"></div>
	<div id="mask"></div>
	<div id="progressIndicator">0%</div>
</div>

<input type="button" class="btn" value="start" onclick="startProgressBar();">
</body></html>

Gradient Progress Bar v1.0
last revision: 09.07.2003
steve@slayeroffice.com
http://www.slayeroffice.com