javascript: how to set the width?

See more:

Javascript

CSS

db1.transaction(function(transaction)
       {
         transaction.executeSql('SELECT t1.*,t2.cust_name,t2.current_bal FROM invoice t1 ,customer t2 where t1.cust_code=t2.cust_code' , [],  function(transaction, result)
         {
	 if (le != 0)
	         {  
			  myTable= "<table class='sorting' id='sorting' bgcolor='#00cafe' >";
		   for (var i = 0; i < result.rows.length; i++) 
			 { 	  
	              var row = result.rows.item(i);
                      var arrayBalance=new  Array();
	               arrayBalance[i]=bal;
                      array=getPercentage(arrayBalance[i]);//width value 

  myTable+="<tr><td class='name' style='width: 300px; height:50px; padding: 0.5em 0 0.1em 0; text-align:right;' >"+myArray[i] +"</p></td><td><div class='progress'><div class='progress-bar' style='{width:'"+(array+'%')+"'}'></td></tr>"; 
	myTable += "</table>";
				  document.getElementById('invoiceTable').innerHTML=myTable;		
			}
}
});
});

function getPercentage(bal)
{
    console.log(bal);
    var balance=(parseFloat(bal)/100);
    return balance;
}

//css

.progress {
    background: none repeat scroll 0 0 #333;
    border-radius: 5px;
    height: 14px;
   margin: 20px 20px 20px 0;
}
.progress-bar {
    background: none repeat scroll 0 0  #F00;
    border-radius: 5px 0 0 5px;
    height: 14px;
}

I need to display a progress bar but not an animated one..with the width value taken from table and calculated.The above code displays the bar filled with the colour specified in css.How can I fill the colour only to the specified percentage??
Can anybody help me plzz..