Template:Progress meter: Difference between revisions

Browse history interactively

← Previous edit Next edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 21:19, 7 July 2018

Template documentation[view] [edit] [history] [purge]

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 , 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

52

100

{{Progress meter|current=52|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=50%}}

Gets:

comment 1

comment 2

52

100

{{Progress meter|current=10|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=100%}}

Gets:

comment 1

comment 2

10

100

{{Progress meter|current=10|moz=yes|grad=yes|display=yes|comment1=comment 1|comment2=comment 2|width=50%}}

Gets:

comment 1

comment 2

10

100

The above documentation is transcluded from Template:Progress meter/doc.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.

@@ Line 3: / Line 3: @@
 {{!}} align="center" {{!}} {{{comment1}}}&nbsp;&nbsp;{{#ifeq:{{{percent}}}|yes|{{#if:{{{percentpref|}}}|{{{percentpref}}}|(}}{{Percentage|{{{current}}}|{{{goal|100}}}|{{{percentdec|0}}}}}{{#if:{{{percentpref|}}}||)}}}}
 {{!}}}
-}}<div id="Main progress bar appearance and calculation" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top: 5px">
+}}<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"
 |
@@ Line 13: / Line 13: @@
 {{!}} align="center" {{!}} {{{comment2}}}
 {{!}}}
-}}</div></div>{{#ifeq:{{{grad}}}|yes|<div id="10% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+}}</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"
 {{!}}
@@ Line 21: / Line 21: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="20% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 29: / Line 29: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="30% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 37: / Line 37: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="40% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 45: / Line 45: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="50% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 53: / Line 53: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="60% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 61: / Line 61: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="70% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 69: / Line 69: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="80% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 77: / Line 77: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div><div id="90% grad mark" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top:2px">
+{{!}}}</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"
 {{!}}
@@ Line 85: / Line 85: @@
 {{!}}}
 {{!}}}
-{{!}}}</div></div>}}<div id="Current value marker" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top: 8px">
+{{!}}}</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"
 |
@@ Line 91: / Line 91: @@
 | {{#ifeq:{{{display}}}|yes|&nbsp;<font color={{{fontcolor1|red}}}>'''{{{current}}}'''</font>&nbsp;&nbsp;&nbsp;&nbsp;}}
 |}
-|}</div></div><div id="goal value marker" style="position:relative; width:{{{width|1000px}}}"><div style="position:absolute; width:100%; top: 11px">
+|}</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"
-| {{#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>&nbsp;&nbsp;&nbsp;&nbsp;}}}}}}
+| 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>&nbsp;&nbsp;&nbsp;&nbsp;}}}}}}
 |}</div></div><br/>
 </includeonly><noinclude>

v t e Progress templates
General progress templates	{{Progress bar}} {{Progression}} {{Composition bar}} {{Composition bar/advanced}} {{Composition bar compact}} {{Composition histogram}} {{Percentage bar}} {{Number and percent}} {{Progress meter}} {{Percentile}} {{Stacked bar}}
Specific-use templates	{{Backlog progress bar}} {{Progress box}} {{Progression rainbow}} {{WikiProject assessment progression}}
Category List (partial)