Template:Progress bar: Difference between revisions
mNo edit summary |
m (possible fix) |
||
(13 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
{{#ifeq: {{{header|yes}}} | yes |
{{#ifeq: {{{header|yes}}} | yes |
||
| <p> |
| <p> |
||
<span style="font-size: 120%;"> |
<span style="font-size: {{{size|120%}}};"> |
||
{{#if: {{{task|}}}| {{{task}}}:<nowiki> </nowiki>}} |
{{#if: {{{task|}}}| {{{task}}}:<nowiki> </nowiki>}} |
||
{{Nowrap|'''{{#expr: ( {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}}) * 100 round 1}}%''' |
{{Nowrap|'''{{#expr: ( {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}}) * 100 round 1}}%''' |
||
Line 12: | Line 12: | ||
</span> |
</span> |
||
</p> |
</p> |
||
}}{{#vardefine:width1|{{#expr: {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}} * 100}}}} |
|||
⚫ | |||
<p style="border:{{{border|1px solid #c8ccd1}}}; padding:{{{padding|1px}}}; overflow:hidden; |
<p style="border:{{{border|1px solid #c8ccd1}}}; padding:{{{padding|1px}}}; overflow:hidden; position:relative; {{#if:{{{margin|}}}|margin:{{{margin|}}};}}"> |
||
<span style=" |
<span style=" |
||
width:{{# |
width:{{#var:width1}}%; |
||
height:{{{height|4}}}px; |
height:{{{height|4}}}px; |
||
background:{{{color1|#00af32}}}; |
background:{{{color1|#00af32}}}; |
||
float:left; |
float:left; |
||
{{#if:{{{shadow|}}}| box-shadow:{{{shadow|}}};}} |
|||
"> </span> |
"> </span> |
||
<span style=" |
<span style=" |
||
Line 26: | Line 27: | ||
float:left; |
float:left; |
||
"> </span> |
"> </span> |
||
{{#arraydefine:pad|{{{padding|1px 1px 1px 1px}}}|/ /}} |
|||
{{#ifeq: {{{texture|no}}} | yes |
|||
| [[File:BarTexture1.png||link=|class=progress-bar-texture-{{#replace:{{#sub:{{#var:width1}}|0|4}}|.|}}{{{height|4}}}{{#arrayindex:pad|1|0}}]] |
|||
{{#css: |
|||
.progress-bar-texture-{{#replace:{{#sub:{{#var:width1}}|0|4}}|.|}}{{{height|4}}}{{#arrayindex:pad|1|0}} { |
|||
position: absolute; |
|||
opacity: {{{opacity|0.3}}}; |
|||
left:{{#arrayindex:pad|1|0}}; |
|||
width:{{#var:width1}}%; |
|||
height:{{{height|4}}}px; |
|||
⚫ | |||
}}}} |
|||
{{#if: {{{text2|}}} |
{{#if: {{{text2|}}} |
||
| <span style=" |
| <span style=" |
||
Line 32: | Line 45: | ||
left: 5px; |
left: 5px; |
||
line-height: 1; |
line-height: 1; |
||
{{#if:{{{size2|}}}| font-size:{{{size2|}}};}} |
|||
{{#if:{{{shadow2|}}}| text-shadow:{{{shadow2|}}};}} |
|||
>{{{text2|}}}</span> |
>{{{text2|}}}</span> |
||
}} |
}} |
Latest revision as of 04:44, 21 April 2022
20% completed
Usage[]
{{Progress bar|value}}
This template draws a progress bar. By default, the value
to supply as the parameter is the percent, from 0 to 100 (e.g. 1 would mean 1%, .1 would be 0.1%). The text label of the progress bar will always be rounded to the nearest tenth of a percent (rounding up if the hundreds digit is 5; e.g. 50.15 would round to 50.2%). If a value isn't specified or is invalid, the bar displays 0%. Values greater than 100% will display incorrectly, although the text label will be correct.
Optional parameters[]
height
= height of the progress bar in pixels; defaults to 2width
= width of the progress bar; defaults to 75%text
= message to display after %; defaults to: completedtotal
= amount to use as the denominator (instead of 100), allows the template to compute the percentage on the flyheader
= no (or any value other than "yes", which is the default) suppresses the display of the percentage on the top line
Examples[]
Default configuration[]
{{Progress bar|5}}
:
5% completed
With custom header text[]
{{Progress bar|5|text=done}}
:
5% done
Without header text[]
{{Progress bar|80|header=no|text=does not display here}}
:
Custom height and width[]
{{Progress bar|80|height=8|width=50%}}
:
5% completed
Custom total[]
{{Progress bar|5|total=5}}
:
100% completed
Template data[]
Makes a progress bar
Parameter | Description | Type | Status | |
---|---|---|---|---|
Value | 1 | The value that gets divided by the Total, or by 100 if it is missing | Number | required |
Total | total | The total amount that the value is divided by
| Number | optional |
Header | header | Turns the header on or off
| Boolean | optional |
Task | task | This is showed before the percentage
| String | optional |
Text | text | The text that is displayed above the progress bar, after the percentage | String | optional |
Width | width | Width of the bar | Unknown | optional |
Height | height | Height of the bar | Unknown | optional |