Difference between revisions of "Template:Percentage bar"
(Sort by % not by value.) |
m (Add class attributes for class selector targeting) |
||
| Line 1: | Line 1: | ||
<div style="display:none">{{#expr: {{formatnum:{{{1|0}}}|R}} / {{formatnum:{{{total|100}}}|R}}}}</div><!-- Sort key | <div style="display:none">{{#expr: {{formatnum:{{{1|0}}}|R}} / {{formatnum:{{{total|100}}}|R}}}}</div><!-- Sort key | ||
| − | --><div style="border:{{{border|1px solid #79542B}}}; padding:{{{padding|1px}}}; overflow:hidden; width:{{{width|50%}}}; margin: none; font-size:xx-small; text-align:right; {{{style|}}}"><!-- | + | --><div class="percentage-bar" style="border:{{{border|1px solid #79542B}}}; padding:{{{padding|1px}}}; overflow:hidden; width:{{{width|50%}}}; margin: none; font-size:xx-small; text-align:right; {{{style|}}}"><!-- |
| − | --><span style=" | + | --><span class="percentage-bar--progress" style=" |
width: {{#expr: {{formatnum:{{{1|<noinclude>3</noinclude>0}}}|R}} / {{formatnum:{{{total|100}}}|R}} * 100}}%; | width: {{#expr: {{formatnum:{{{1|<noinclude>3</noinclude>0}}}|R}} / {{formatnum:{{{total|100}}}|R}} * 100}}%; | ||
height: {{{height|12px}}}; | height: {{{height|12px}}}; | ||
Latest revision as of 20:54, 22 October 2023
This template creates a simple status bar representing the completion percent of anything. By default, this template assumes that the bar goes from 0% to 100%, therefore in use:
{{Percentage bar|25}}
generates:
However, the top end can be overridden by specifying the total argument (case-sensitive), therefore in this case:
{{Percentage bar|25|total=200}}
generates:
as 25 of 200 is 12%, rounding to the nearest whole number.
