There are hundreds of imageswap and textswap examples on the web, just do a search.
In the script, call the javascript as you go, as it's downloaded to the client in chunks, and can be executed as it is received.
Something like this... (rough as guts, so excuse the numerous errors)
<table border="0" cellspacing="0" cellpadding="6" align="center">
<tr><th>10%</th><th>20%</th><th>30%</th><th>40%</th><th>50%</th><th>60%</th><th>70%</th><th>80%</th><th>90%</th><th>100%</th></tr>
<tr><td id="T1"> </td><td id="T2"> </td><td id="T3"> </td><td id="T4"> </td><td id="T5"> </td>
<td id="T6"> </td><td id="T7"> </td><td id="T8"> </td><td id="T9"> </td><td id="T10"> </td></tr>
</table>
$splits=floor($itemsexpected/10);
for ($x=1;$x<=10;$x++) {
$blocky[$x*$splits]="<script language=\"javascript\">document.getElementById(\"T$x\").style.backgroundColor=\"#000000\";</script>\n";
}
foreach($items as $i) {
//dowhatever....
$itemcount++;
print $blocky[$itemcount];
}
mash to suit. It assumes > 10 items tho....