Creating simple percent bar using Java Script function

Create simple percent bar using Java Script function. The function uses plain table and td? to render percent bar on page. The function can be extend to create progress bar.

<script>
function IndexBar(BarLength, PercnetI, BackColor )
{
document.write(“<table border=’1′ width='”+BarLength+”‘ cellspacing=’0′ cellpadding=’0’ bordercolor=’#”+BackColor+”‘ bgcolor=’\#”+BackColor+”‘>”);
document.write (“<tr>”);
document.write (“<td width=’75\%’ bgcolor=’\#”+BackColor+”‘>”);
document.write (“<table border=’0’ width='”+((BarLength/4)*3)+”‘ cellspacing=’0′ cellpadding=’0’ bordercolor=’#”+BackColor+”‘ height=’10’>”);
document.write (“<tr><td width='”+PercnetI+”\%’ bgcolor=’#0000FF’></td>”);
document.write (“<td width='”+(100-PercnetI)+”\%’ bgcolor=’\#FF0000′></td>”);
document.write (“</tr></table></td>”);
document.write (“<td width=’\25%’ bgcolor=’\#”+BackColor+”‘><span style=’background-color: \#”+BackColor+”‘>”);
document.write (“<b><font color=’#FF0000′ face=’Verdana’ size=’2′>”+PercnetI+”\%</font></b></span></td></tr></table>”);
}
</script>

Copy above code in head section of your page and call the function as given below.

<script>IndexBar(200,30,”FFFFFF”)</script>

OR

javascript: IndexBar(200,30,”FFFFFF”);

Parameters:

1. Length of the Bar.
2. Percent to show the Bar.
3. Background color to match the page background color.

Live Demo

Download Code