View source for Template:ProgressBar

<includeonly>{{#if: {{{verbose|}}}|{{#ask: [[Category:Box {{{box}}}]]
[[Category:Untranscribed]]
 |format=list
 |limit=0
 |link=all
 |headers=show
 |searchlabel=Untranscribed
 |columns=3
}}: {{{untranscribed}}}<br>
{{#ask: [[Category:Box {{{box}}}]]
[[Category:In Progress]]
 |format=list
 |limit=0
 |link=all
 |headers=show
 |searchlabel=In Progress
 |columns=3
}}: {{{in_progress}}}<br>
{{#ask: [[Category:Box {{{box}}}]]
[[Category:Ready For Review]]
 |format=list
 |limit=0
 |link=all
 |headers=show
 |searchlabel=Ready For Review
 |columns=3
}}: {{{ready}}}<br>
{{#ask: [[Category:Box {{{box}}}]]
[[Category:Completed]]
 |format=list
 |limit=0
 |link=all
 |headers=show
 |searchlabel=Completed
 |columns=3
}}: {{{complete}}}<br>
{{#ask: [[Category:Box {{{box}}}]]
 |format=list
 |limit=0
 |link=all
 |headers=show
 |searchlabel=Total
 |columns=3
}}: {{{total}}}|}}
<div class="progress-bar" style="width:{{{width|50%}}}">
<div class="progress-bar-header" style="width:100%;text-align:center">
  <p><span style="float:left">0</span><span>Completed: {{{complete}}}({{#expr:100*
      {{{complete}}}/
      {{{total}}} round 2
    }}%)</span><span style="float:right">{{{total}}}</span></p>
</div>
<div >
  <div style="width:auto;height:{{{height|25px}}};border:1px solid black;">
    <div style="position:relative;float:left;display: inline-block;valign:bottom;background-color:black;background-repeat:repeat;
      width:{{#expr: 100*{{{complete}}}/{{{total}}} round 2}}%;height:100%;">
    </div>
    <div style="float:left;display: inline-block;valign:bottom;background-color:#ffa0a0;background-repeat:repeat;
      width:
        {{#expr: 100*
          {{{ready}}}/
          {{{total}}} round 2
        }}%;
      height:100%;
    ">
    </div>
    <div style="float:left;display: inline-block;valign:bottom;background-color:#ffe867;background-repeat:repeat;
      width:
        {{#expr: 100*
          {{{in_progress}}}/
          {{{total}}} round 2
        }}%;
      height:100%;
    ">
    </div>
  </div>
  <p style="text-align:center;"></p>
</div>
</div>
</includeonly>