Template:Progress ring: Difference between revisions

From Portals of Phereon Wiki
Browse history interactively
Content added Content deleted
VisualWikitext
No edit summary
(temporally remove regex)
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><templatestyles src="Progress_ring/ProgressRing.css" /><!--
<div class="progress-ring"><!--
-->{{#vardefine:id|{{{id|noId}}}}}<!--
-->{{#Widget:ProgressRing
| dimensions = {{#expr:{{{radius|40}}} * 2 + {{{width|8}}}}}
-->{{#vardefine:rad|{{{radius|40}}}}}<!--
-->{{#vardefine:per|{{{percentage|0}}}}}{{#ifexpr: {{#var:per}} > 100 | {{#vardefine:per|100}} }}<!--
| offset = {{#expr:{{{radius|40}}} + {{{width|8}}} / 2}}
-->{{#vardefine:width|{{{width|8}}}}}<!--
| radius = {{{radius|40}}}
-->{{#vardefine:size|{{{size|{{#expr: ceil((({{#var:rad}} * 2) - {{#var:width}}) * 0.3)}}}}}}}<!--
| preline_color = {{{preline-color|#00000077}}}
-->{{#vardefine:color|{{{color|#97a71d}}}}}<!--
| preline_width = {{{preline-width|1}}}
-->{{#vardefine:time|{{{anim-time|0.5}}}}}<!--
| outline_color = {{{preline-color|#000000AA}}}
-->{{#vardefine:bColor|{{{background-color|#d6dadc}}}}}<!--
| outline_width = {{#if:{{{no-outline|}}}||{{{width|8}}}}}
-->{{#vardefine:cColor|{{{center-color|#E0DCD4}}}}}<!--
| mainline_color = {{{color|green}}}
-->{{#vardefine:tColor|{{{text-color|{{#var:color}}}}}}}<!--
| mainline_width = {{#if:{{{no-outline|}}}|{{{width|8}}}|{{#expr:{{{width|8}}} - 2}}}}
--><div id="progress-{{#var:id}}" class="progress-ring" data-progress="{{#var:per}}">
}}<!--
<div class="circle">
--><span class="percentage">{{{percentage|0}}}%</span><!--
<div class="mask full">
--></div>
<div class="fill"></div>
{{#css:
</div>
.progress-ring > svg {
<div class="mask half">
stroke-dasharray: 252; /* (2PI * 40px) */
<div class="fill"></div>
stroke-dashoffset: 252;
<div class="fill fix"></div>
animation: offsettozero 0.5s forwards ease-out;
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage">
<div class="numbers"><span>{{#var:per}}%</span></div>
</div>
</div>
</div><!--
-->{{#css:
#progress-{{#var:id}}.progress-ring {
width:{{#expr:{{#var:rad}}*2}}px;
height:{{#expr:{{#var:rad}}*2}}px;
background-color: {{#var:bColor}};
}
}
#progress-{{#var:id}}.progress-ring .circle .mask {

clip: rect(0px, {{#expr:{{#var:rad}}*2}}px, {{#expr:{{#var:rad}}*2}}px, {{#var:rad}}px);
.progress-ring {
height: 88px;
width: 88px;
}
}
#progress-{{#var:id}}.progress-ring .circle .mask .fill {

clip: rect(0px, {{#var:rad}}px, {{#expr:{{#var:rad}}*2}}px, 0px);
.progress-ring .percentage {
background-color: {{#var:color}};
font-size: 24px;
}
}
#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;
@keyframes offsettozero {
}
#progress-{{#var:id}}.progress-ring .inset {
width: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px;
height: {{#expr:({{#var:rad}}*2) - ({{#var:width}}*2)}}px;
margin-left: {{#var:width}}px;
margin-top: {{#var:width}}px;
background-color: {{#var:cColor}};
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-{{#var:id}}.progress-ring .inset .percentage .numbers span {
font-size: {{#var:size}}px;
color: {{#var:tColor}};
}
#progress-{{#var:id}}.progress-ring[data-progress="{{#var:per}}"] .circle .mask.full,
#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;
}
#progress-{{#var:id}}.progress-ring .circle .mask,
#progress-{{#var:id}}.progress-ring .circle .fill {
-webkit-backface-visibility: hidden;
}
@keyframes ring-{{PAGEID}}-{{#var:id}}-anim-1 {
to {
to {
transform: rotate({{#expr:{{#var:per}}*1.8}}deg);
stroke-dashoffset: 0;
}
}
}
}
@keyframes ring-{{PAGEID}}-{{#var:id}}-anim-2 {
}}
to {
transform: rotate({{#expr:{{#var:per}}*3.6}}deg);
}
}
#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;
}
}}</includeonly><noinclude>
{{doc}}
</noinclude>

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"