Template:Progress ring: Difference between revisions

From Portals of Phereon Wiki
Content added Content deleted
m (back to template style)
(temporally remove regex)
 
Line 1: Line 1:
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!--
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!--
-->{{#vardefine:id|{{#rreplace:{{{id|noId}}}|[^0-9a-zA-Z\-]+|}}}}<!--
-->{{#vardefine:id|{{{id|noId}}}}}<!--
-->{{#vardefine:rad|{{#rreplace:{{{radius|40}}}|\D|}}}}<!--
-->{{#vardefine:rad|{{{radius|40}}}}}<!--
-->{{#vardefine:per|{{#rreplace:{{{percentage|0}}}|\D|}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!--
-->{{#vardefine:per|{{{percentage|0}}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!--
-->{{#vardefine:width|{{#rreplace:{{{width|8}}}|\D|}}}}<!--
-->{{#vardefine:width|{{{width|8}}}}}<!--
-->{{#vardefine:size|{{#rreplace:{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}|\D|}}}}<!--
-->{{#vardefine:size|{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}}}<!--
-->{{#vardefine:color|{{#rmatch:{{{color|#97a71d}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:color|{{{color|#97a71d}}}}}<!--
-->{{#vardefine:time|{{#rmatch:{{{anim-time|0.5}}}|^\d+\.?\d*$|$0}}}}<!--
-->{{#vardefine:time|{{{anim-time|0.5}}}}}<!--
-->{{#vardefine:bColor|{{#rmatch:{{{background-color|#d6dadc}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:bColor|{{{background-color|#d6dadc}}}}}<!--
-->{{#vardefine:cColor|{{#rmatch:{{{center-color|#E0DCD4}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:cColor|{{{center-color|#E0DCD4}}}}}<!--
-->{{#vardefine:tColor|{{#rmatch:{{{text-color|{{#var:color}}}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:tColor|{{{text-color|{{#var:color}}}}}}}<!--
--><div id="progress-{{#var:id}}" 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">

Latest revision as of 03:51, 15 April 2022

[view | edit | purge]Documentation
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.