Template:Progress meter: Difference between revisions
Appearance
Content deleted Content added
Daedalus969 (talk | contribs) reduce |
Daedalus969 (talk | contribs) →top: make sure the td is aligned to the right; use proper ids(ids don't have spaces in them) |
||
Line 3: | Line 3: | ||
{{!}} align="center" {{!}} {{{comment1}}} {{#ifeq:{{{percent}}}|yes|{{#if:{{{percentpref|}}}|{{{percentpref}}}|(}}{{Percentage|{{{current}}}|{{{goal|100}}}|{{{percentdec|0}}}}}{{#if:{{{percentpref|}}}||)}}}} |
{{!}} align="center" {{!}} {{{comment1}}} {{#ifeq:{{{percent}}}|yes|{{#if:{{{percentpref|}}}|{{{percentpref}}}|(}}{{Percentage|{{{current}}}|{{{goal|100}}}|{{{percentdec|0}}}}}{{#if:{{{percentpref|}}}||)}}}} |
||
{{!}}} |
{{!}}} |
||
}}<div id=" |
}}<div id="Main_progress_bar_appearance_and_calculation" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top: 5px"> |
||
{| style="background: {{{background1|transparent}}}; border:3px solid {{{bordercolor|blue}}}; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{{height|50}}}|{{#expr:{{{height|50}}}+1}}}}px;{{#ifeq:{{{moz}}}|yes| {{border-radius|{{{mozsize|110}}}px}}}} text-align:right" |
{| style="background: {{{background1|transparent}}}; border:3px solid {{{bordercolor|blue}}}; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{{height|50}}}|{{#expr:{{{height|50}}}+1}}}}px;{{#ifeq:{{{moz}}}|yes| {{border-radius|{{{mozsize|110}}}px}}}} text-align:right" |
||
| |
| |
||
Line 13: | Line 13: | ||
{{!}} align="center" {{!}} {{{comment2}}} |
{{!}} align="center" {{!}} {{{comment2}}} |
||
{{!}}} |
{{!}}} |
||
}}</div></div>{{#ifeq:{{{grad}}}|yes|<div id="10% |
}}</div></div>{{#ifeq:{{{grad}}}|yes|<div id="10%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 21: | Line 21: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="20% |
{{!}}}</div></div><div id="20%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 29: | Line 29: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="30% |
{{!}}}</div></div><div id="30%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 37: | Line 37: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="40% |
{{!}}}</div></div><div id="40%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 45: | Line 45: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="50% |
{{!}}}</div></div><div id="50%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 53: | Line 53: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="60% |
{{!}}}</div></div><div id="60%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 61: | Line 61: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="70% |
{{!}}}</div></div><div id="70%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 69: | Line 69: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="80% |
{{!}}}</div></div><div id="80%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 77: | Line 77: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div><div id="90% |
{{!}}}</div></div><div id="90%_grad_mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px"> |
||
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
{{{!}} style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{#ifexpr:{{{height|50}}}=60|{{#expr:{{{height|50}}}+17}}|{{#expr:{{{height|50}}}+18}}}}|{{#expr:{{{height|50}}}+7}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} align:right" |
||
{{!}} |
{{!}} |
||
Line 85: | Line 85: | ||
{{!}}} |
{{!}}} |
||
{{!}}} |
{{!}}} |
||
{{!}}}</div></div>}}<div id=" |
{{!}}}</div></div>}}<div id="Current_value_marker" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top: 8px"> |
||
{| style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{{height|50}}}|{{#expr:{{{height|50}}}+1}}}}px; {{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} text-align:right" |
{| style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{{height|50}}}|{{#expr:{{{height|50}}}+1}}}}px; {{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} text-align:right" |
||
| |
| |
||
Line 91: | Line 91: | ||
| {{#ifeq:{{{display}}}|yes| <font color={{{fontcolor1|red}}}>'''{{{current}}}'''</font> }} |
| {{#ifeq:{{{display}}}|yes| <font color={{{fontcolor1|red}}}>'''{{{current}}}'''</font> }} |
||
|} |
|} |
||
|}</div></div><div id=" |
|}</div></div><div id="goal_value_marker" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top: 11px"> |
||
{| style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{{height|50}}}|{{#expr:{{{height|50}}}+1}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} text-align:right" |
{| style="background: transparent; border:2px clear; width:100%; height:{{#if:{{{1|{{{current|}}}}}}|{{{height|50}}}|{{#expr:{{{height|50}}}+1}}}}px;{{#ifeq:{{{moz}}}|yes|{{border-radius|{{{mozsize|110}}}px}}}} text-align:right" |
||
| {{#ifeq:{{{display}}}|yes|{{#ifexpr:{{{current}}}>={{{2|{{{goal|100}}}}}}||{{#ifexpr:{{{current}}}>={{#expr:({{{2|{{{goal|100}}}}}}*.99) round 0}}|<font color={{{fontcolor2|red}}}>'''{{{2|{{{goal|100}}}}}}'''</font>|<font color={{{fontcolor2|red}}}>'''{{{2|{{{goal|100}}}}}}'''</font> }}}}}} |
| style="text-align: right;" | {{#ifeq:{{{display}}}|yes|{{#ifexpr:{{{current}}}>={{{2|{{{goal|100}}}}}}||{{#ifexpr:{{{current}}}>={{#expr:({{{2|{{{goal|100}}}}}}*.99) round 0}}|<font color={{{fontcolor2|red}}}>'''{{{2|{{{goal|100}}}}}}'''</font>|<font color={{{fontcolor2|red}}}>'''{{{2|{{{goal|100}}}}}}'''</font> }}}}}} |
||
|}</div></div><br/> |
|}</div></div><br/> |
||
</includeonly><noinclude> |
</includeonly><noinclude> |
Revision as of 21:19, 7 July 2018
![]() | This template employs intricate features of template syntax.
You are encouraged to familiarise yourself with its setup and parser functions before editing the template. If your edit causes unexpected problems, please undo it quickly, as this template may appear on a large number of pages. You can conduct experiments, and should test all major changes, in either this template's sandbox, the general template sandbox, or your user space before changing anything here. |
Usage
Required parameters:
- current/1=: The current progress to the goal. Note that goal defaults to 100 if not specified. Usage: {{Progress meter|<current value>}} or {{Progress meter|current=<current value>}}
Optional parameters:
- goal=: The goal. Defaults to 100 if not specified.
- height=: The height of the progress part of the bar, defaults to 50 if unspecified. Make sure to not specify unit: height=60(correct) (vs.) height=60px(incorrect). CANNOT USE PERCENTAGE AS UNIT. It's been tried, and it will not work.
- width=: The width of the progress part of the bar, defaults to 1000px if unspecified. Can either be in px or %.
- comment1=: Comment that appears above the bar.
- comment2=: Comment that appears below the bar.
- grad=: If yes, then it will display graduations.
- grads=: Number of graduations to display, defaults to 9.
- gradwidth=: Width of graduation marks, defaults to 10 unless specified. As described above and below, only use number, not number and unit. Note that grad width may have to be decreased in order to fit the bar size without obscuring the bar.
- gradcolor=: The color of the graduations. Defaults to black, rules as described below for input regarding color apply.
- display=: If yes, then it will display the current number on the progress bar, and the goal on the thermometer. Defaults to the right side.
- align=: Right, left, or center. Note that this is only for the progress bar. The goal number will always be displayed on the right.
- fontcolor1=: Font color for current amount. Rules for coloring applies as seen for other parameters.
- fontcolor2=: Font color for goal amount. Same rules as above apply.
- moz=: If yes, then the corners of the bar will be rounded. Default size is 110px, for altering this size, see below.
- mozsize=: Size of rounded corners. Defaults to 110px unless specified. Make sure that you enter in just the number, not the number and unit: mozsize=<number>(correct) (vs.) mozsize=<number>px(incorrect).
- background1=: Background color for entire bar, defaults to transparent. If using a color other than color names (e.g., blue/red), then make sure you type out the full hash (e.g., #ffffff, versus ffffff)
- background2=: Background for the 'progress' part of the bar, defaults to #2222EE. Same rules apply as said above.
- bordercolor=: Border color for the entire bar. Note that this is not for the 'progress' part of the bar. Defaults to blue.
- percent=: Percentage bar is complete. Will appear if 'yes'. Anything else and it will not.
- percentdec=': Decimal places percentage goes past decimal. Optional, default is 0.
- percentpref=' : Prefix of percentage note. Can be anything. If not supplied, percentage by default is between ()s.
Examples
{{Progress meter|current=52|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=100%}}
Gets:
comment 1 |
|
comment 2 |
|
|
|
|
|
|
|
|
|
|
100 |
{{Progress meter|current=52|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=50%}}
Gets:
comment 1 |
|
comment 2 |
|
|
|
|
|
|
|
|
|
|
100 |
{{Progress meter|current=10|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=100%}}
Gets:
comment 1 |
|
comment 2 |
|
|
|
|
|
|
|
|
|
|
100 |
{{Progress meter|current=10|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=50%}}
Gets:
comment 1 |
|
comment 2 |
|
|
|
|
|
|
|
|
|
|
100 |