I have my template and for the most part it does work, there are two things wrong. I want the Progress bar to Align left of the page, and I also want the percentage to show.
<div style="
width:{{{width|25%}}};
{{#ifeq: {{{center|yes}}} | yes |
margin:auto;
text-align:center;}}">
{{#ifeq: {{{header|yes}}} | yes
| <p>
{{{text|completed <small>(estimate)</small>}}}
</p>
}}
<p style="border:{{{border|1px solid gray}}}; padding:{{{padding|1px}}}; overflow:hidden;">
<span style="
width: {{#expr: {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}} * 100}}%;
height: {{{height|2}}}px;
background:{{{color1|#5FDB00}}};
float:left;"> </span>
<span style="
width:{{#expr: 100 - {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}} * 100}}%;
height:{{{height|2}}}px;
background:{{{color2|#efefef}}};
float:left;
"> </span>
</p>
</div>
My example
{{Progress bar|90|text=KTG Image Rebuild}}
In this example the task is 90% complete but that doesnt show on or above the Progress bar.
Give this a try. You weren't actually trying to put the progress text in it, not sure why you'd expect it to be there. It's added as a div above the progress bar <p>.
<div style="float:left; width:{{{width|25%}}}; {{#ifeq: {{{center|yes}}} | yes | margin:auto; text-align:center;}}">
{{#ifeq: {{{header|yes}}} | yes | <p>
{{{text|completed <small>(estimate)</small>}}}
</p>
}}
<div style="float:right; text-align:right; font-size:10px; line-height:10px;">{{{1|20}}}%</div>
<p style="border:{{{border|1px solid gray}}}; padding:{{{padding|1px}}}; overflow:hidden; float:left; width:80%">
<span style="width:{{#expr: {{{1|20}}} / {{{total|100}}} * 100}}%; height:{{{height|2}}}px; background:{{{color1|#5FDB00}}}; float:left;"> </span>
<span style="width:{{#expr: 100 - {{{1|20}}} / {{{total|100}}} * 100}}%; height:{{{height|2}}}px; background:{{{color2|#efefef}}}; float:left;"> </span>
</p>
</div>