Template:Progress ring: Difference between revisions

From Portals of Phereon Wiki
Browse history interactively
Content added Content deleted
VisualWikitext
(New progress ring)
(temporally remove regex)
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>{{#vardefine:id|{{#rreplace:{{{id|noID}}}|^[a-zA-Z0-9]+$|}}}}<!--
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!--
-->{{#vardefine:rad|{{#rreplace:{{{radius|40}}}|\D|}}}}<!--
-->{{#vardefine:id|{{{id|noId}}}}}<!--
-->{{#vardefine:per|{{#rreplace:{{{percentage|0}}}|\D|}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!--
-->{{#vardefine:rad|{{{radius|40}}}}}<!--
-->{{#vardefine:width|{{#rreplace:{{{width|8}}}|\D|}}}}<!--
-->{{#vardefine:per|{{{percentage|0}}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!--
-->{{#vardefine:size|{{#rreplace:{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}|\D|}}}}<!--
-->{{#vardefine:width|{{{width|8}}}}}<!--
-->{{#vardefine:color|{{#rmatch:{{{color|#97a71d}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:size|{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}}}<!--
-->{{#vardefine:time|{{#rmatch:{{{anim-time|0.5}}}|^\d+\.?\d*$|$0}}}}<!--
-->{{#vardefine:color|{{{color|#97a71d}}}}}<!--
-->{{#vardefine:bColor|{{#rmatch:{{{background-color|#d6dadc}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:time|{{{anim-time|0.5}}}}}<!--
-->{{#vardefine:cColor|{{#rmatch:{{{center-color|#fbfbfb}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:bColor|{{{background-color|#d6dadc}}}}}<!--
-->{{#vardefine:tColor|{{#rmatch:{{{text-color|{{{color|#97a71d}}}}}}|^#(?:[0-9a-fA-F]{3}){1,2}${{!}}\D+|$0}}}}<!--
-->{{#vardefine:cColor|{{{center-color|#E0DCD4}}}}}<!--
-->{{#vardefine:tColor|{{{text-color|{{#var:color}}}}}}}<!--
--><div 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">
<div class="mask full">
<div class="mask full">
Line 27: Line 28:
</div><!--
</div><!--
-->{{#css:
-->{{#css:
.progress-ring {
#progress-{{#var:id}}.progress-ring {
width:{{#expr:{{#var:rad}}*2}}px;
width:{{#expr:{{#var:rad}}*2}}px;
height:{{#expr:{{#var:rad}}*2}}px;
height:{{#expr:{{#var:rad}}*2}}px;
background-color: {{#var:bColor}};
background-color: {{#var:bColor}};
}
}
.progress-ring .circle .mask {
#progress-{{#var:id}}.progress-ring .circle .mask {
clip: rect(0px, {{#expr:{{#var:rad}}*2}}px, {{#expr:{{#var:rad}}*2}}px, {{#var:rad}}px);
clip: rect(0px, {{#expr:{{#var:rad}}*2}}px, {{#expr:{{#var:rad}}*2}}px, {{#var:rad}}px);
}
}
.progress-ring .circle .mask .fill {
#progress-{{#var:id}}.progress-ring .circle .mask .fill {
clip: rect(0px, {{#var:rad}}px, {{#expr:{{#var:rad}}*2}}px, 0px);
clip: rect(0px, {{#var:rad}}px, {{#expr:{{#var:rad}}*2}}px, 0px);
background-color: {{#var:color}};
background-color: {{#var:color}};
}
}
.progress-ring .circle .shadow {
#progress-{{#var:id}}.progress-ring .circle .shadow {
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2) inset;
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2) inset;
}
}
.progress-ring .inset {
#progress-{{#var:id}}.progress-ring .inset {
width: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px;
width: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px;
height: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px;
height: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px;
Line 50: Line 51:
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2);
box-shadow: {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px {{#expr:floor({{#var:width}}/2)}}px rgba(0, 0, 0, 0.2);
}
}
.progress-ring .inset .percentage .numbers span {
#progress-{{#var:id}}.progress-ring .inset .percentage .numbers span {
font-size: {{#var:size}}px;
font-size: {{#var:size}}px;
color: {{#var:tColor}};
color: {{#var:tColor}};
}
}
.progress-ring[data-progress="{{#var:per}}"] .circle .mask.full,
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .mask.full,
.progress-ring[data-progress="{{#var:per}}"] .circle .fill {
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .fill {
animation: ring-{{PAGEID}}-{{#var:id}}-anim-1 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out;
animation: ring-{{PAGEID}}-{{#var:id}}-anim-1 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out;
}
}
.progress-ring .circle .mask,
#progress-{{#var:id}}.progress-ring .circle .mask,
.progress-ring .circle .fill {
#progress-{{#var:id}}.progress-ring .circle .fill {
-webkit-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
Line 72: Line 73:
}
}
}
}
.progress-ring[data-progress="{{#var:per}}"] .circle .fill.fix {
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .fill.fix {
animation: ring-{{PAGEID}}-{{#var:id}}-anim-2 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out;
animation: ring-{{PAGEID}}-{{#var:id}}-anim-2 {{#expr: {{#var:per}} / 100 * {{#var:time}}}}s forwards ease-out;
}
}

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.
Retrieved from "https://www.portalsofphereon.com/wiki/Template:Progress_ring?oldid=20928"