View source for User:TehPerson/MeterBar

<div style="width:{{{width|300px}}}; display:inline-block; text-align:center; font-size:85%; margin-bottom:18px;">
<div style="margin-bottom:-0.4em; font-weight:bold; font-size:110%;">{{{1|3.60}}}s</div>
<div style="border:#999 2px solid; height:5px; border-bottom:none; text-align:center; margin-bottom:2px;"></div>
<div style="position:relative; height:18px; background-color:#ccc; ">
<div title="Damage window" style="position:absolute; background-color:#{{attack color}}; color:#fff; max-height:100%; width:{{#expr: 100* ({{{3|3.5}}} - {{{2|2.7}}})/{{{1|3.6}}}}}%; left:{{#expr: 100* {{{2|2.7}}}/{{{1|3.6}}}}}%;">{{#expr: {{{3|3.5}}} - {{{2|2.7}}}}}s</div>
<div title="Dodge window" style="position:absolute; background-color:#{{defense color}}; color:#fff; max-height:100%; width:min({{#expr: 100* 0.7/{{{1|3.6}}}}}%, {{#expr: 100* {{{2|2.7}}}/{{{1|3.6}}}}}%); left:max(0%, {{#expr: 100* ({{{2|2.7}}} - 0.7)/{{{1|3.6}}}}}%);">&nbsp;</div>
<p style="position:absolute; bottom:-24px; left:calc({{#expr: 100* {{{2|2.7}}}/{{{1|3.6}}}}}% - 1em);">{{{2|2.7}}}s</p>
<p style="position:absolute; bottom:-24px; left:calc({{#expr: 100* {{{3|3.5}}}/{{{1|3.6}}}}}% - 1em);">{{{3|3.5}}}s</p>
<p style="position:absolute; bottom:-24px; left:max(0%, calc({{#expr: 100* ({{{2|2.7}}} - 0.7)/{{{1|3.6}}}}}% - 1em));">{{#ifexpr: {{{2|2.7}}} > 0.7|{{#expr:{{{2|2.7}}} - 0.7}}|0}}s</p>
</div>
</div><noinclude>

===Fury Cutter===
{{User:TehPerson/MeterBar|0.4|0.1|0.4}}

===Metal Claw===
{{User:TehPerson/MeterBar|0.7|0.43|0.63}}

===Hydro Cannon===
{{User:TehPerson/MeterBar|1.9|0.5|1.6}}

</noinclude>