Template:Progress ring: Difference between revisions

From Portals of Phereon Wiki
Content added Content deleted
m (add more identification to the progress ring so that the ring doesn't get confused when there is multiple in the same page)
(temporally remove regex)
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!--
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!--
-->{{#vardefine:id|{{#rreplace:{{{id|noID}}}|^[a-zA-Z0-9]+$|}}}}<!--
-->{{#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.