Template:Composition bar: Difference between revisions

Revision as of 23:35, 31 December 2025

   50 / 100

Template usage: Template:TemplateName

@@ Line 1: / Line 1: @@
-<div style="border: {{{border-width|1px}}} solid {{{border-color|#000000}}}; background-color: {{{background-color|#f0f0f0}}}; width: {{{width|100}}}px; height: 1.5em;  position:relative; top: -{{{border-width|1px}}}"><div style="position: absolute; background-color:{{#if:{{both|{{{4|}}}|{{{5|}}}}}
+<div style="
-    |rgb({{#expr:255*{{{3|255}}}}},{{#expr:255*{{{4|0}}}}},{{#expr:255*{{{5|0}}}}})
+  border: {{{border-width|1px}}} solid {{{border-color|#000000}}};
-     |{{{hex|{{{3|#CCCCCC}}}}}}
+  background-color: {{{background-color|#f0f0f0}}};
-}}; width: {{#expr:floor({{{width|100}}}*{{{1|{{#expr:{{{width|100}}}/2}}}}}/{{{2|{{{width|100}}}}}})}}px; height: 1.5em;"></div><div style="position: absolute; font-weight: bold; width: {{{width|100}}}px; line-height: 1.5em; text-align: center; z-index: 5; color: {{{color|#000}}};">{{formatnum:{{{1|50}}}}}&nbsp;/&nbsp;{{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}|&nbsp;&nbsp;&nbsp;<span style="{{{perstyle|}}}">({{#expr:(({{{1|50}}}/{{{2|100}}})*100)round 0}}&nbsp;%)</span>}}<noinclude>
+  width: {{{width|100}}}px;
+  height: 1.5em;
+  position: relative;
+  top: -{{{border-width|1px}}};
+">
+  <!-- Filled bar -->
+  <div style="
+    position: absolute;
+    background-color: {{{colorbar|#CCCCCC}}};
+     width: {{#expr: floor(({{{1|50}}} / {{{2|100}}}) * {{{width|100}}}) }}px;
+    height: 1.5em;
+  "></div>
+  <!-- Text overlay -->
+  <div style="
+    position: absolute;
+    font-weight: bold;
+    width: {{{width|100}}}px;
+    line-height: 1.5em;
+    text-align: center;
+    z-index: 5;
+    color: {{{color|#000}}};
+  ">
+    {{formatnum:{{{1|50}}}}}&nbsp;/&nbsp;{{formatnum:{{{2|100}}}}}
+    {{#if:{{{per|}}}
+      |&nbsp;&nbsp;
+      <span style="{{{perstyle|}}}">
+        ({{#expr: ({{{1|50}}} / {{{2|100}}}) * 100 round 0 }}%)
+      </span>
+    }}
+  </div>
+</div>
+<noinclude>
+Template usage:
+{{TemplateName|current|max|width=200|colorbar=#4CAF50|per=1}}
 </noinclude>