Goatlings: Progress Bars

Progress Bars - Basecodes

<table width="100%" bgcolor="f8f8f8" cellpadding="20"><td>

<table width="50%" align="center"><td>

<b>Basic</b><br />

<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%"></td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%">25%</td><td bgcolor="white" width="100%"></td></table>
<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%" align="center">25%</td><td bgcolor="white" width="100%"></td></table>
<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%" align="right">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%" class="small-text">25%</td><td bgcolor="white" width="100%"></td></table>
<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%" align="center" class="small-text">25%</td><td bgcolor="white" width="100%"></td></table>
<br /><table width="100%" bgcolor="cccccc"><td bgcolor="ffffcd" width="25%" align="right" class="small-text">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%"></td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%" align="center">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%" align="right">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%" class="small-text">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%" align="center" class="small-text">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%" align="right" class="small-text">25%</td><td bgcolor="white" width="100%"></td></table>

<br /><br /><b>Refined</b>

<br />

<table width="100%" cellspacing="0" cellpadding="0"><td width="25%" align="right">25%</td><td width="100%"></td></table>
<table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%"></td><td bgcolor="white" width="100%"></td></table>

<br />

<table width="100%" cellspacing="0" cellpadding="0"><td width="25%" class="small-text" align="right">25%</td><td width="100%"></td></table>
<table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4"><td bgcolor="ffffcd" width="25%"></td><td bgcolor="white" width="100%"></td></table>

<br />

<table width="100%" cellspacing="0" cellpadding="0">
<td width="25%" class="small-text" align="right">Step 1</td>
<td width="25%" class="small-text" align="right">Step 2</td>
<td width="25%" class="small-text" align="right">Step 3</td>
<td width="100%"></td>
</table>
<table width="100%" bgcolor="cccccc" cellspacing="0" cellpadding="0" height="4">
<td width="25%" bgcolor="red"></td>
<td width="25%" bgcolor="orange"></td>
<td width="25%" bgcolor="yellow"></td>
<td width="25%" bgcolor="white"></td>
</table>

<br /><table width="100%" bgcolor="cccccc" cellspacing="1" cellpadding="2"><td bgcolor="ffffcd" width="25%"></td><td bgcolor="white" width="100%"></td></table>

</td></table>


</td></table></b>