When I was creating a simple google widget for our office coffee club, I thought of showing current inventory status with a progress bar. To my surprise, I was not able to google any simple html/javascript code for it. All I found was hefty javascripts which does a zillion things to display just a progress bar. Creating a progress bar should not be that hard… So, I googled harder, but no use.
After a while I decided to create my own and my requirement was not to write too much code (more code means more maintenance work) and should work in any web browser (ofcourse, it should be javascript enabled)
After an hour of work, I had it ready and hooked it in my widget.
Feel free to use it for your ‘Progress bar’ needs 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.bar {
border-style: solid;
border-color: gray;
border-width: 1px;
}
</style>
<script>
function setPercent(id, percent)
{
var div = document.getElementById(id);
var barImg = div.getElementsByTagName("img");
barImg[0].width = (div.offsetWidth * percent) / 100;
}
</script>
</head>
<body onload="setPercent('fir',75);setPercent('sec',11)">
Progress bar with 75% complete
<div class="bar" id="fir" class="progressbar"><img src="bar.jpg"
width="20px" height="20px" /></div>
<br>
Progress bar of size 300 px with 11% complete
<div class="bar" id="sec" class="progressbar" style="width: 300px"><img
src="bar.jpg" width="20px" height="20px" /></div>
</body>
</html>
Logic: Whenever the setPercent() method is called, the javascript will get the right div tag, calculates and sets the width of image inside it based on the current div tags width and percent complete. Simple right?
Hey, where’s the code?
“View Source” the link given to see the code.
hi…where the codes…..can u mail me that???
The site i hosted was dead… I have added the html code instead.
Hey, the logic you provided is very simple. It helped me in my work. Thanks for sharing. I found out your blog from google. Have a nice day
Thx, it really helped me
Thank you very much it really helped me
Finally found the easiest way.
Thank you so much.