Template:CompositionBar

This template creates a single horizontal bar that visually represents a percentage or value relative to a total, similar to how the Wikipedia `Template:Composition_bar` can be used for a single metric.

Usage

To use this template, copy the following code to a page named `Template:CompositionBar` (or a similar name of your choice):

```wiki

 <div class="composition-bar-fill" style="
   width:%;
   background-color:#4CAF50;
   color:white;
 ">
   
     %
   

Then, on any page where you want to add a composition bar, you can use either named parameters or the new positional parameters:

Using Positional Parameters:

<style> .composition-bar-wrapper { /* Default width is 100px unless overridden by 'width' parameter / margin: 1em auto; / Default center alignment / font-size: 90%; / Default border is 1px solid gray, controlled by template parameter / border-radius: 5px; overflow: hidden; / Ensures fill stays within bounds / box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-sizing: border-box; / Include padding/border in width / height: 25px; / Fixed height for the bar itself / background-color: #e0e0e0; / Default background for the unfilled part / position: relative; / For positioning the fill */ }

.composition-bar-fill { height: 100%; text-align: center; line-height: 25px; /* Vertically center the label / color: white; / Default text color for the label */

<style> .composition-bar-wrapper { /* Default width is 100px unless overridden by 'width' parameter / margin: 1em auto; / Default center alignment / font-size: 90%; / Default border is 1px solid gray, controlled by template parameter / border-radius: 5px; overflow: hidden; / Ensures fill stays within bounds / box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-sizing: border-box; / Include padding/border in width / height: 25px; / Fixed height for the bar itself / background-color: #e0e0e0; / Default background for the unfilled part / position: relative; / For positioning the fill */ }

.composition-bar-fill { height: 100%; text-align: center; line-height: 25px; /* Vertically center the label / color: white; / Default text color for the label */

Using Named Parameters (still supported):

<style> .composition-bar-wrapper { /* Default width is 100px unless overridden by 'width' parameter / margin: 1em auto; / Default center alignment / font-size: 90%; / Default border is 1px solid gray, controlled by template parameter / border-radius: 5px; overflow: hidden; / Ensures fill stays within bounds / box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-sizing: border-box; / Include padding/border in width / height: 25px; / Fixed height for the bar itself / background-color: #e0e0e0; / Default background for the unfilled part / position: relative; / For positioning the fill */ }

.composition-bar-fill { height: 100%; text-align: center; line-height: 25px; /* Vertically center the label / color: white; / Default text color for the label */

Parameters

   1 (amount): (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)

   2 (total): (Optional) The maximum possible value. Defaults to 100. (e.g., 100)

   3 (color): (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.

   4 (background_color): (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.

   5 (border_style): (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.

   per: (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.

   width: (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.

   float: (Optional) Floats the bar. Options: left, right, none. Useful with width.

   text_color: (Optional) Sets the text color for the label displayed on the bar. Defaults to white.