Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Progress bar/doc

Template page

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).

Template parameters

ParameterDescriptionTypeStatus
amountamount

The amount of a thing (also functions as the numerator.) Should preferably be restricted to whole numbers.

Example
1, 20, 50, 125, 15215
Unknownoptional
totaltotal

The total of a thing (also functions as the denominator.) Should preferably be restricted to whole numbers.

Example
1000, 1024124, 12, 24
Unknownrequired
widthwidth

Sets a custom width for the bar. By default, the width is 100px.

Example
300px, 400em, 50%, etc.
Unknownoptional
bar-colorbar-color

Allows you to change the color of the bar. Defaults to {{olb}}.

Example
#00000, #aaa, hsla(20, 80%, 100%, 0.5), etc.
Unknownoptional