(change background-color to background) |
(use darker blue color) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style="width: | <div style="max-width:500px;" class="{{{class|}}}"> | ||
<div>{{{1|46}}} / {{{2|200}}} ({{#expr: ({{{1|46}}} / {{{2|200}}}) * 100 round 0 }}%)</div> | <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:none; width:100%; height:{{{height|2em}}}; border:1px black solid; box-sizing:border-box;> | ||
<div style="background:{{{color| | <div style="background:{{{color|#36c}}}; 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></div> | ||
</div><noinclude> | </div><noinclude> | ||
| Line 32: | Line 32: | ||
"type": "string", | "type": "string", | ||
"description": "Customise the color of the bar.", | "description": "Customise the color of the bar.", | ||
"default": " | "default": "#36c" | ||
}, | }, | ||
"class": { | "class": { | ||
Latest revision as of 01:41, 19 December 2024
46 / 200 (23%)
Shows a progress bar, comparing one value to a total.
| 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.
| String | optional |
| Bar color | color | Customise the color of the bar.
| 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 |