Template:Progress bar

  

Description
This template allows you to create a highly customizable progress bar anywhere in a wiki page. Just call it this way:

Parameters
Here is the list of accepted parameters and their effect on the progress bar. There are two ways of indicating the value (percentage) represented by the bar. The first method uses the  parameter, while the second uses the ,   and   parameters. Whatever method you use, you can use the  parameter to display any text on the bar, or use the   parameter which writes down the percentage represented by the bar before the text contained in this parameter. See examples below.


 * progression
 * Indicates the percentage represented by the progression bar.
 * ex:
 * default value:


 * min
 * Indicates the value of the lower bound of the range represented by this bar.
 * ex:
 * default value:
 * note: if the  parameter is used, the   parameter is discarded.


 * max
 * Indicates the value of the upper bound of the range represented by this bar.
 * ex:
 * default value:
 * note: if the  parameter is used, the   parameter is discarded.


 * current
 * Indicates the value of the position into the range represented by this bar. This number must be contained between  and.
 * ex:
 * default value:
 * note: if the  parameter is used, the   parameter is discarded.


 * progression-text
 * Indicates the text written on the progression bar. If not specified, the text is determined automatically. See explanations below.
 * ex:
 * default value:


 * title
 * Indicates the text displayed in the tooltip. If not specified, the text is determined automatically. See explanations below.
 * ex:
 * default value:


 * mode
 * Indicates which of the percentage or the current value is to be displayed on the bar and the tooltip. Used only if the second method is used.
 * specify  to make the text display the value of the   parameter instead of the calculated percentage
 * to get the default behavior, simply don't use this parameter


 * desc
 * Indicates the text to be displayed on the bar behind the actual percentage represented by the bar.
 * ex:
 * default value: none
 * note: the  parameter is overridden by the   and the   parameters respectively.


 * bar-background
 * Color used as the background of the progression bar.
 * ex:  or
 * default value:


 * box-background
 * Color used as the background of the block in which the bar is located.
 * ex:  or
 * default value:


 * box-border
 * Style of the border of the block in which the bar is located.
 * ex:
 * default value:


 * box-margin
 * Indicates how far the block in which the bar is located must be from the text around it.
 * ex:
 * default value:


 * box-padding
 * Indicates the width of the space between the progression bar and the border of the block around it.
 * ex:
 * default value:


 * box-width
 * Indicates the width of the block in which the bar is located.
 * ex:
 * default value:


 * text-color
 * Color of the text written in the center of the bar.
 * default value:


 * text-size
 * Size of the text written in the center of the bar.
 * default value:


 * text-weight
 * Weight of the text written in the center of the bar.
 * default value:


 * box-style
 * Any additional values inside the style="" attribute for the box. Values here overwrite default values.


 * bar-style
 * Any additional values inside the style="" attribute for the bar. Values here overwrite default values.

Calculation methods
There are two methods you can use to make your bar represent a progression. The first method is by simply specifying the  parameter. You tell the percentage and the bar shows it. Simple. The second method can be used when you want to display a bar showing progression through a finite set of values. You give the,   and   parameters, and the percentage is calculated with the following formula:. If both methods are used, the first one takes precedence. The examples below show how to use both methods.

How the text displayed on the bar and in the tooltip is determined
The tooltip and the bar are the two "zones" where text is displayed on the progression bar. Each one has its own "master parameter",  for the tooltip and   for the bar. If you provide one of these parameters, you will see the text you entered in the corresponding area. If you skip one of these parameters (or both), the text which is displayed is determined automatically. It consists of the percentage represented by the bar (whether given directly through the first method or calculated through the second), followed by the content of the  parameter if specified. However, if you used the second calculation method, then you can force the text to show the content of the  parameter instead of the percentage, by adding the   parameter to your template call. Note: to see the tooltip, just put your mouse over the bar. A little box containing the tooltip text should appear.

Examples
Simple progress bar, using the first method:

Styled progress bar, using the second method:

A few combinations of both calculation methods and the,   and   parameters: