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 id="{{PAGEID}}-{{{id|}}}" class="progress-ring" {{#if:{{{style|}}}|style="{{{style}}}"}}><!--
<includeonly><div id="ring-{{PAGEID}}-{{{id|noid}}}" class="progress-ring" {{#if:{{{style|}}}|style="{{{style}}}"}}><!--
-->{{#Widget:ProgressRing
-->{{#Widget:ProgressRing
| dimensions = {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}
| dimensions = {{#expr: {{{radius|40}}} * 2 + {{{width|8}}}}}
Line 14: Line 14:
--></div><!--
--></div><!--
-->{{#css:
-->{{#css:
#{{PAGEID}}-{{{id|}}}.progress-ring > svg {
#ring-{{PAGEID}}-{{{id|noid}}}.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: {{PAGEID}}-{{{id|}}}-anim {{#expr: {{{percentage|0}}} / 100 * {{{anim-time|0.5}}}}}s forwards ease-out;
animation: ring-{{PAGEID}}-{{{id|noid}}}-anim {{#expr: {{{percentage|0}}} / 100 * {{{anim-time|0.5}}}}}s forwards ease-out;
}
}


#{{PAGEID}}-{{{id|}}}.progress-ring {
#ring-{{PAGEID}}-{{{id|noid}}}.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 {
@keyframes ring-{{PAGEID}}-{{{id|noid}}}-anim {
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:45, 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=4810"