Ever try to find a simple progress indicator using nothing but HTML/CSS. Sometimes things can get overly complicated and this makes it all the easier to have a straight-forward, clean, and un-complicated user interface. Besides, it’s fast and easy. That’s what our findings are all about.

The results of this is:

Progress:

15%

The source code is:

<table style="width: 10%;">
<tr>
    <td style="padding:0px;border-style:none;padding-right:2px;" nowrap>
      <span style="font-size:11px;">Progress:</span>
    </td>
    <td style="padding:0px;border-style:none;width:100%;">
      <div style="width:99%;border:1px solid #cccccc;padding:1px;height:6px;">
        <div style="width:15%;background:green;height:6px;"></div>
      </div>
    </td>
    <td style="padding:0px;border-style:none;padding-left:5px;font-size:10px;">8%</td>
</tr>
</table>