Template:Progress ring: Difference between revisions
mNo edit summary |
m (add more identification to the progress ring so that the ring doesn't get confused when there is multiple in the same page) |
||
Line 10: | Line 10: | ||
-->{{#vardefine:cColor|{{#rmatch:{{{center-color|#E0DCD4}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!-- |
-->{{#vardefine:cColor|{{#rmatch:{{{center-color|#E0DCD4}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!-- |
||
-->{{#vardefine:tColor|{{#rmatch:{{{text-color|{{#var:color}}}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!-- |
-->{{#vardefine:tColor|{{#rmatch:{{{text-color|{{#var:color}}}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!-- |
||
--><div 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"> |
||
<div class="mask full"> |
<div class="mask full"> |
||
Line 28: | Line 28: | ||
</div><!-- |
</div><!-- |
||
-->{{#css: |
-->{{#css: |
||
.progress-ring { |
#progress-{{#var:id}}.progress-ring { |
||
width:{{#expr:{{#var:rad}}*2}}px; |
width:{{#expr:{{#var:rad}}*2}}px; |
||
height:{{#expr:{{#var:rad}}*2}}px; |
height:{{#expr:{{#var:rad}}*2}}px; |
||
background-color: {{#var:bColor}}; |
background-color: {{#var:bColor}}; |
||
} |
} |
||
.progress-ring .circle .mask { |
#progress-{{#var:id}}.progress-ring .circle .mask { |
||
clip: rect(0px, {{#expr:{{#var:rad}}*2}}px, {{#expr:{{#var:rad}}*2}}px, {{#var:rad}}px); |
clip: rect(0px, {{#expr:{{#var:rad}}*2}}px, {{#expr:{{#var:rad}}*2}}px, {{#var:rad}}px); |
||
} |
} |
||
.progress-ring .circle .mask .fill { |
#progress-{{#var:id}}.progress-ring .circle .mask .fill { |
||
clip: rect(0px, {{#var:rad}}px, {{#expr:{{#var:rad}}*2}}px, 0px); |
clip: rect(0px, {{#var:rad}}px, {{#expr:{{#var:rad}}*2}}px, 0px); |
||
background-color: {{#var:color}}; |
background-color: {{#var:color}}; |
||
} |
} |
||
.progress-ring .circle .shadow { |
#progress-{{#var:id}}.progress-ring .circle .shadow { |
||
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2) inset; |
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2) inset; |
||
} |
} |
||
.progress-ring .inset { |
#progress-{{#var:id}}.progress-ring .inset { |
||
width: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px; |
width: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px; |
||
height: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px; |
height: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px; |
||
Line 51: | Line 51: | ||
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2); |
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2); |
||
} |
} |
||
.progress-ring .inset .percentage .numbers span { |
#progress-{{#var:id}}.progress-ring .inset .percentage .numbers span { |
||
font-size: {{#var:size}}px; |
font-size: {{#var:size}}px; |
||
color: {{#var:tColor}}; |
color: {{#var:tColor}}; |
||
} |
} |
||
.progress-ring[data-progress="{{#var:per}}"] .circle .mask.full, |
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .mask.full, |
||
.progress-ring[data-progress="{{#var:per}}"] .circle .fill { |
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .fill { |
||
animation: ring-{{PAGEID}}-{{#var:id}}-anim-1 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out; |
animation: ring-{{PAGEID}}-{{#var:id}}-anim-1 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out; |
||
} |
} |
||
.progress-ring .circle .mask, |
#progress-{{#var:id}}.progress-ring .circle .mask, |
||
.progress-ring .circle .fill { |
#progress-{{#var:id}}.progress-ring .circle .fill { |
||
-webkit-backface-visibility: hidden; |
-webkit-backface-visibility: hidden; |
||
} |
} |
||
Line 73: | Line 73: | ||
} |
} |
||
} |
} |
||
.progress-ring[data-progress="{{#var:per}}"] .circle .fill.fix { |
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .fill.fix { |
||
animation: ring-{{PAGEID}}-{{#var:id}}-anim-2 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out; |
animation: ring-{{PAGEID}}-{{#var:id}}-anim-2 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out; |
||
} |
} |
Revision as of 21:34, 25 December 2020
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 |