Template:Progress bar: Difference between revisions
Template page
More actions
add bar-color and background-color |
m make it so px isnt the only unit useable |
||
| Line 1: | Line 1: | ||
<includeonly><div style="width: {{{width| | <includeonly><div style="width: {{{width|100px}}};"><span class="nowrap">{{formatnum:{{{amount|50}}}}} / {{formatnum:{{{total|100}}}}} {{small|''({{#expr: (({{{amount|50}}}/{{{total|100}}}*100)) round 0}}%)''}}</span><div style="border: 1px solid #aaa; {{#if:{{{background-color|}}}|background-color: {{{background-color}}};}} height: 1em; position: relative;"><div style="background-color: {{{bar-color|{{olb}}}}}; width: {{#expr:(({{{amount|50}}}/{{{total|100}}})*100)}}%; height: .85em;"></div></div></div></includeonly><noinclude>{{documentation}}</noinclude> | ||
Latest revision as of 21:42, 18 October 2024
Useage
{{Progress bar
|amount=
|total=
|width=
|bar-color=
|background-color=
}}
Examples
| Code | Result |
|---|---|
{{Progress bar}}
|
50 / 100 (50%)
|
{{Progress bar|amount=10}}}
|
10 / 100 (10%)
|
{{Progress bar|amount=10|total=45}}
|
10 / 45 (22%)
|
{{Progress bar|amount=10|total=45|width=200px}}
|
10 / 45 (22%)
|
{{Progress bar|amount=10|total=45|width=100%|bar-color=red}}
|
10 / 45 (22%)
|
{{Progress bar|amount=10|total=45|width=100%|bar-color=red|background-color=#aa0011}}}
|
10 / 45 (22%)
|
Template Data
The progress bar is used to display progress between a total number and a partial number (i.e. 1 out of 100).
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| amount | amount | The amount of a thing (also functions as the numerator.) Should preferably be restricted to whole numbers.
| Unknown | optional |
| total | total | The total of a thing (also functions as the denominator.) Should preferably be restricted to whole numbers.
| Unknown | required |
| width | width | Sets a custom width for the bar. By default, the width is 100px.
| Unknown | optional |
| bar-color | bar-color | Allows you to change the color of the bar. Defaults to {{olb}}.
| Unknown | optional |