Template:Progress bar

Template documentation

Usage edit

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

Examples edit

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