Sudhakar Rayavaram
Problem solver (And maker),
Inquisitive (Root to most of my problems),
Software craftsman (Don't ask me for estimates)

Part of TarkaLabs

Technical Advisor for SportIndia

30 Mar 2008
Progress bar in HTML

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 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4     <title>Insert title here</title>
 5     <style>
 6         .bar {
 7             border-style: solid;
 8             border-color: gray;
 9             border-width: 1px;
10         }
11     </style>
12     <script>
13         function setPercent(id, percent)
14         {
15             var div = document.getElementById(id);
16             var barImg = div.getElementsByTagName("img");
17             barImg[0].width = (div.offsetWidth * percent) / 100;
18         }
19     </script>
20 </head>
21 <body onload="setPercent('fir',75);setPercent('sec',11)">
22 Progress bar with 75% complete
23 <div class="bar" id="fir" class="progressbar"><img src="bar.jpg"
24                                                    width="20px" height="20px" /></div>
25 <br>
26 Progress bar of size 300 px with 11% complete
27 <div class="bar" id="sec" class="progressbar" style="width: 300px"><img
28         src="bar.jpg" width="20px" height="20px" /></div>
29 </body>
30 </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?