Template:ProgressBar: Difference between revisions

Revision as of 03:53, 13 December 2024

46 / 200 (23%)

Shows a progress bar, comparing one value to a total.

Template parameters
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
1st value	`1`	The first value.	Number	required
Total	`2`	The total.	Number	required
Height	`height`	Customise the height of the bar. Default 2em	String	optional
Bar color	`color`	Customise the color of the bar. Default cyan	String	optional
CSS class	`class`	Add CSS classes to the main div containing all parts of the bar, including the preceding number label.	String	optional
Bar CSS class	`bar_class`	Add CSS classes to the colored part of the bar.	String	optional

@@ Line 2: / Line 2: @@
 <div>{{{1|46}}} / {{{2|200}}} ({{#expr: ({{{1|46}}} / {{{2|200}}}) * 100 round 0 }}%)</div>
 <div style="background-color:none; width:100%; height:{{{height|2em}}}; border:1px black solid; box-sizing:border-box;>
-<div style="background-color:{{{color|cyan}}}; height:100%; border-right:1px black solid; box-sizing:border-box; width:{{#expr: ({{{1|46}}} / {{{2|200}}}) * 100 round 0 }}%">
+<div style="background-color:{{{color|cyan}}}; height:100%; border-right:1px black solid; box-sizing:border-box; width:{{#expr: ({{{1|46}}} / {{{2|200}}}) * 100 round 0 }}%" class="{{{bar_class|}}}">
 </div></div>
 </div><noinclude>
@@ Line 38: / Line 38: @@
 			"type": "string",
 			"description": "Add CSS classes to the main div containing all parts of the bar, including the preceding number label."
+		},
+		"bar_class": {
+			"label": "Bar CSS class",
+			"type": "string",
+			"description": "Add CSS classes to the colored part of the bar."
 		}
 	}