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.

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>”);

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



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


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

Live Demo

Download Code

Written by Bala Krishna

Bala Krishna is web developer and occasional blogger from Bhopal, MP, India. He like to share idea, issue he face while working with the code.