Template:ProgressBar: Difference between revisions

Latest revision as of 03:55, 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 1: / Line 1: @@
-<div style="width:100%;">
+<div style="width:100%;" class="{{{class|}}}">
 <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|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 33: / Line 33: @@
 			"description": "Customise the color of the bar.",
 			"default": "cyan"
+		},
+		"class": {
+			"label": "CSS class",
+			"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."
 		}
 	}