Template:Progress bar

Template documentation


UsageEdit

{{Progress bar
| <number>
| total
| width
| height
| text-size
| text
| progress-done-colour
| progress-tbd-colour
| fill
| display-percentage
}}
Parameter Description Default Notes
The percentage done you want to display (between 0 and 100). <none> REQUIRED
total Calculates the progression as a function of param1/total 100
width The width of the progress bar, in pixels. 500
height The height of the progress bar, in pixels. 5
text-size If set to a non-zero value, it causes the value of the progress to be displayed over the progress bar. The font size of the text is the value of text-size. 0
text-align The alignment of the text center
text Text to be displayed over the progress bar, with the progress itself. The font size of the text is the value of text-size.
progress-done-colour The colour of the "done" part of the progress bar. #7fff00
progress-tbd-colour The colour of the "to be done" part of the progress bar. #ff7f50
fill If set to a non-zero value, it causes the progress bar to horizontally fill all the available space, instead of the fixed value of width 0
display-percentage If set to zero, it causes the completion percentage to not be displayed in the text 0

ExamplesEdit

{{Progress bar|75}}

{{Progress bar|150|400}}

{{Progress bar|33|width=1000|height=20|text-size=10|progress-done-colour=steelblue|progress-tbd-colour=indianred}}

33%

{{Progress bar|0}}

{{Progress bar|100}}

{{Progress bar|150|height=20|text-size=10}}

150%

{{Progress bar|60|height=20|text-size=11|text=Complicated task}}

Complicated task (60%)

{{Progress bar|60|height=20|text-size=11|text=Complicated task|display-percentage=0}}

Complicated task
{| class="wikitable" style="width:95%;"
|-
! scope="col" width='20%;' | Task
! Comment 
|-
| style='padding: 0px;'| {{Progress bar|60|text=Complicated task|text-align=left|text-size=12|fill=1|height=20}}
| Lots done
|-
| style='padding: 0px;'| {{Progress bar|10|text=Very complicated task|text-align=left|text-size=12|fill=1|height=20}}
| Less done
|}
Task Comment
Complicated task (60%)
Lots done
Very complicated task (10%)
Less done