Template:Progress ring: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<div class="progress-ring"><!-- |
<includeonly><div class="progress-ring"><!-- |
||
-->{{#Widget:ProgressRing |
-->{{#Widget:ProgressRing |
||
| dimensions = {{#expr:{{{radius|40}}} * 2 + {{{width|8}}}}} |
| dimensions = {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}} |
||
| offset = {{#expr:{{{radius|40}}} + {{{width|8}}} / 2}} |
| offset = {{#expr: {{{radius|40}}} + {{{width|8}}} / 2}} |
||
| radius = {{{radius|40}}} |
| radius = {{{radius|40}}} |
||
| preline_color = {{{preline-color|#00000077}}} |
| preline_color = {{{preline-color|#00000077}}} |
||
| preline_width = {{{preline-width|1}}} |
| preline_width = {{{preline-width|1}}} |
||
| outline_color = {{{preline-color|#000000AA}}} |
| outline_color = {{{preline-color|#000000AA}}} |
||
| outline_width = {{#if:{{{no-outline|}}}||{{{width|8}}}}} |
| outline_width = {{{outline_width|{{#if:{{{no-outline|}}}||{{{width|8}}}}}}}} |
||
| mainline_color = {{{color|green}}} |
| mainline_color = {{{color|green}}} |
||
| mainline_width = {{#if:{{{no-outline|}}}|{{{width|8}}}|{{#expr:{{{width|8}}} - 2}}}} |
| mainline_width = {{#if:{{{no-outline|}}}|{{{width|8}}}|{{#expr: {{{width|8}}} - 2}}}} |
||
}}<!-- |
}}<!-- |
||
--><span class="percentage">{{{percentage|0}}}%</span><!-- |
--><span class="percentage">{{{percentage|0}}}%</span><!-- |
||
--></div> |
--></div><!-- |
||
{{#css: |
-->{{#css: |
||
.progress-ring > svg { |
.progress-ring > svg { |
||
stroke-dasharray: |
stroke-dasharray: {{#expr: ceil(2 * pi * {{{radius|40}}})}}; |
||
stroke-dashoffset: |
stroke-dashoffset: {{#expr: ceil(2 * pi * {{{radius|40}}})}}; |
||
animation: |
animation-duration: {{#expr: {{{percentage|0}}} / 100 * {{{anim-time|0.5}}}}}s; |
||
} |
} |
||
.progress-ring { |
.progress-ring { |
||
height: {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}px; |
|||
height: 88px; |
|||
width: {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}px; |
|||
width: 88px; |
|||
} |
} |
||
.progress-ring .percentage { |
.progress-ring .percentage { |
||
font-size: {{#expr: ({{{radius|40}}} * 2 - {{{width|8}}}) * 0.3}}px; |
|||
font-size: 24px; |
|||
} |
} |
||
@keyframes offsettozero { |
@keyframes offsettozero { |
||
to { |
to { |
||
stroke-dashoffset: 0; |
stroke-dashoffset: {{#expr: (100 - {{{percentage|0}}}) / 100 * ceil(2 * pi * {{{radius|40}}})}}; |
||
} |
} |
||
} |
} |
||
}}</includeonly><noinclude> |
|||
}} |
|||
{{doc}} |
|||
</noinclude> |
Revision as of 02:03, 9 September 2020
| dimensions = 88 | offset = 44 | radius = 40 | preline_color = #00000077 | preline_width = 1 | outline_color = #000000AA | outline_width = 8 | mainline_color = green | mainline_width = 6}}60%
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 |