Template:Progress ring: Difference between revisions

From Portals of Phereon Wiki
Browse history interactively
Content added Content deleted
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<includeonly><div class="progress-ring"><!--
<includeonly><div id="{{PAGEID}}-{{{id|}}}" class="progress-ring"><!--
-->{{#Widget:ProgressRing
-->{{#Widget:ProgressRing
| dimensions = {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}
| dimensions = {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}
Line 11: Line 11:
| mainline_width = {{#if:{{{no-outline|}}}|{{{width|8}}}|{{#expr: {{{width|8}}} - {{{outline-width|2}}} }}}}
| mainline_width = {{#if:{{{no-outline|}}}|{{{width|8}}}|{{#expr: {{{width|8}}} - {{{outline-width|2}}} }}}}
}}<!--
}}<!--
--><span class="percentage">{{{percentage|0}}}%</span><!--
--><span class="percentage" style="font-size: {{#expr: ({{{radius|40}}} * 2 - {{{width|8}}}) * 0.3}}px;">{{{percentage|0}}}%</span><!--
--></div><!--
--></div><!--
-->{{#css:
-->{{#css:
.progress-ring > svg {
#{{PAGEID}}-{{{id|}}}.progress-ring > svg {
stroke-dasharray: {{#expr: ceil(2 * pi * {{{radius|40}}})}};
stroke-dasharray: {{#expr: ceil(2 * pi * {{{radius|40}}})}};
stroke-dashoffset: {{#expr: ceil(2 * pi * {{{radius|40}}})}};
stroke-dashoffset: {{#expr: ceil(2 * pi * {{{radius|40}}})}};
animation-duration: {{#expr: {{{percentage|0}}} / 100 * {{{anim-time|0.5}}}}}s;
animation: {{PAGEID}}-{{{id|}}}-anim {{#expr: {{{percentage|0}}} / 100 * {{{anim-time|0.5}}}}}s forwards ease-out;
}
}


.progress-ring {
#{{PAGEID}}-{{{id|}}}.progress-ring {
height: {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}px;
height: {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}px;
width: {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}px;
width: {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}px;
}
}


@keyframes {{PAGEID}}-{{{id|}}}-anim {
.progress-ring .percentage {
font-size: {{#expr: ({{{radius|40}}} * 2 - {{{width|8}}}) * 0.3}}px;
}

@keyframes offsettozero {
to {
to {
stroke-dashoffset: {{#expr: (100 - {{{percentage|0}}}) / 100 * ceil(2 * pi * {{{radius|40}}})}};
stroke-dashoffset: {{#expr: (100 - {{{percentage|0}}}) / 100 * ceil(2 * pi * {{{radius|40}}})}};

Revision as of 02:30, 9 September 2020

[view | edit | purge]Documentation
{{#Widget:ProgressRing 
| 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

Template parameters[Edit template data]

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
IDid

Set an ID unique to this particular ring (NO SPACES!)

Stringsuggested
Percentagepercentage

The percentage displayed, enter without %

Default
0
Numberrequired
Radiusradius

Sets the radius of the circle (total diameter will be radius * 2)

Default
40
Numberoptional
Ring widthwidth

Width of the progress ring itself

Default
8
Numberoptional
Colorcolor

Sets the progress bar's color

Default
#fbfbfb
Unknownoptional
Animation timeanim-time

The time in seconds it takes for the ring to fill up (normalized based on percentage)

Default
0.5
Numberoptional
Text Sizesize

Set's the percentage text size (default: adaptive)

Numberoptional
Background colorbackground-color

Background progress ring color

Default
#d6dadc
Unknownoptional
Text Background Colorcenter-color

Percentage background text color

Default
#E0DCD4
Unknownoptional
Text Colortext-color

Percentage text color (default: percentage color)

Default
#d6dadc
Unknownoptional
[view | edit | purge]The above documentation is transcluded fromTemplate:Progress ring/doc.
Retrieved from "https://www.portalsofphereon.com/wiki/Template:Progress_ring?oldid=4806"