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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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?