Template:Progress ring: Difference between revisions
m (back to template style) |
(temporally remove regex) |
||
Line 1: | Line 1: | ||
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!-- |
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!-- |
||
-->{{#vardefine:id| |
-->{{#vardefine:id|{{{id|noId}}}}}<!-- |
||
-->{{#vardefine:rad| |
-->{{#vardefine:rad|{{{radius|40}}}}}<!-- |
||
-->{{#vardefine:per| |
-->{{#vardefine:per|{{{percentage|0}}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!-- |
||
-->{{#vardefine:width| |
-->{{#vardefine:width|{{{width|8}}}}}<!-- |
||
-->{{#vardefine:size| |
-->{{#vardefine:size|{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}}}<!-- |
||
-->{{#vardefine:color| |
-->{{#vardefine:color|{{{color|#97a71d}}}}}<!-- |
||
-->{{#vardefine:time| |
-->{{#vardefine:time|{{{anim-time|0.5}}}}}<!-- |
||
-->{{#vardefine:bColor| |
-->{{#vardefine:bColor|{{{background-color|#d6dadc}}}}}<!-- |
||
-->{{#vardefine:cColor| |
-->{{#vardefine:cColor|{{{center-color|#E0DCD4}}}}}<!-- |
||
-->{{#vardefine:tColor| |
-->{{#vardefine:tColor|{{{text-color|{{#var:color}}}}}}}<!-- |
||
--><div id="progress-{{#var:id}}" class="progress-ring" data-progress="{{#var:per}}"> |
--><div id="progress-{{#var:id}}" class="progress-ring" data-progress="{{#var:per}}"> |
||
<div class="circle"> |
<div class="circle"> |
Latest revision as of 03:51, 15 April 2022
Creates a progress ring
Template style in Template:Progress_ring/ProgressRing.css
Usage[]
{{Progress ring|radius=40|width=8|color=green|percentage=0|id=anything}}
For more parameters, see TemplateData.
NB! Setting an ID is Recommended if there are more than one rings on the same page
Template data[]
Creates a progress ring
Parameter | Description | Type | Status | |
---|---|---|---|---|
ID | id | Set an ID unique to this particular ring (NO SPACES!) | String | suggested |
Percentage | percentage | The percentage displayed, enter without %
| Number | required |
Radius | radius | Sets the radius of the circle (total diameter will be radius * 2)
| Number | optional |
Ring width | width | Width of the progress ring itself
| Number | optional |
Color | color | Sets the progress bar's color
| Unknown | optional |
Animation time | anim-time | The time in seconds it takes for the ring to fill up (normalized based on percentage)
| Number | optional |
Text Size | size | Set's the percentage text size (default: adaptive) | Number | optional |
Background color | background-color | Background progress ring color
| Unknown | optional |
Text Background Color | center-color | Percentage background text color
| Unknown | optional |
Text Color | text-color | Percentage text color (default: percentage color)
| Unknown | optional |