Template:Progress ring: Difference between revisions
No edit summary |
(temporally remove regex) |
||
(19 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!-- |
|||
<div class="progress-ring"><!-- |
|||
-->{{#vardefine:id|{{{id|noId}}}}}<!-- |
|||
-->{{#Widget:ProgressRing |
|||
-->{{#vardefine:rad|{{{radius|40}}}}}<!-- |
|||
| dimensions = 88 |
|||
-->{{#vardefine:per|{{{percentage|0}}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!-- |
|||
| offset = 44 |
|||
-->{{#vardefine:width|{{{width|8}}}}}<!-- |
|||
| radius = 40 |
|||
-->{{#vardefine:size|{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}}}<!-- |
|||
| preline_color = #00000077 |
|||
-->{{#vardefine:color|{{{color|#97a71d}}}}}<!-- |
|||
| preline_width = 1 |
|||
-->{{#vardefine:time|{{{anim-time|0.5}}}}}<!-- |
|||
| outline_color = #000000AA |
|||
-->{{#vardefine:bColor|{{{background-color|#d6dadc}}}}}<!-- |
|||
| outline_width = 8 |
|||
-->{{#vardefine:cColor|{{{center-color|#E0DCD4}}}}}<!-- |
|||
| mainline_color = green |
|||
-->{{#vardefine:tColor|{{{text-color|{{#var:color}}}}}}}<!-- |
|||
| mainline_width = 6 |
|||
--><div id="progress-{{#var:id}}" class="progress-ring" data-progress="{{#var:per}}"> |
|||
}}<!-- |
|||
<div class="circle"> |
|||
--><span class="percentage">{{{percentage|0}}}%</span><!-- |
|||
<div class="mask full"> |
|||
--></div> |
|||
<div class="fill"></div> |
|||
{{#css: |
|||
</div> |
|||
.progress-ring > svg { |
|||
<div class="mask half"> |
|||
stroke-dasharray: 252; /* (2PI * 40px) */ |
|||
<div class="fill"></div> |
|||
stroke-dashoffset: 252; |
|||
<div class="fill fix"></div> |
|||
animation: offsettozero 0.5s forwards ease-out; |
|||
</div> |
|||
<div class="shadow"></div> |
|||
</div> |
|||
<div class="inset"> |
|||
<div class="percentage"> |
|||
<div class="numbers"><span>{{#var:per}}%</span></div> |
|||
</div> |
|||
</div> |
|||
</div><!-- |
|||
-->{{#css: |
|||
#progress-{{#var:id}}.progress-ring { |
|||
width:{{#expr:{{#var:rad}}*2}}px; |
|||
height:{{#expr:{{#var:rad}}*2}}px; |
|||
background-color: {{#var:bColor}}; |
|||
} |
} |
||
#progress-{{#var:id}}.progress-ring .circle .mask { |
|||
clip: rect(0px, {{#expr:{{#var:rad}}*2}}px, {{#expr:{{#var:rad}}*2}}px, {{#var:rad}}px); |
|||
.progress-ring { |
|||
height: 88px; |
|||
width: 88px; |
|||
} |
} |
||
#progress-{{#var:id}}.progress-ring .circle .mask .fill { |
|||
clip: rect(0px, {{#var:rad}}px, {{#expr:{{#var:rad}}*2}}px, 0px); |
|||
.progress-ring .percentage { |
|||
background-color: {{#var:color}}; |
|||
font-family: Lato, sans-serif; |
|||
font-weight: bold; |
|||
font-size: 24px; |
|||
} |
} |
||
#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; |
|||
@keyframes offsettozero { |
|||
} |
|||
#progress-{{#var:id}}.progress-ring .inset { |
|||
width: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px; |
|||
height: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px; |
|||
margin-left: {{#var:width}}px; |
|||
margin-top: {{#var:width}}px; |
|||
background-color: {{#var:cColor}}; |
|||
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-{{#var:id}}.progress-ring .inset .percentage .numbers span { |
|||
font-size: {{#var:size}}px; |
|||
color: {{#var:tColor}}; |
|||
} |
|||
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .mask.full, |
|||
#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; |
|||
} |
|||
#progress-{{#var:id}}.progress-ring .circle .mask, |
|||
#progress-{{#var:id}}.progress-ring .circle .fill { |
|||
-webkit-backface-visibility: hidden; |
|||
} |
|||
@keyframes ring-{{PAGEID}}-{{#var:id}}-anim-1 { |
|||
to { |
to { |
||
transform: rotate({{#expr:{{#var:per}}*1.8}}deg); |
|||
stroke-dashoffset: 0; |
|||
} |
} |
||
} |
} |
||
@keyframes ring-{{PAGEID}}-{{#var:id}}-anim-2 { |
|||
}} |
|||
to { |
|||
transform: rotate({{#expr:{{#var:per}}*3.6}}deg); |
|||
} |
|||
} |
|||
#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; |
|||
} |
|||
}}</includeonly><noinclude> |
|||
{{doc}} |
|||
</noinclude> |
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 |