Template:Progress ring: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
(Created page with "<div class="progress-ring"> {{#Widget:ProgressRing | dimensions = 88 | offset = 44 | radius = 40 | preline_color = #00000077 | preline_width = 1 | outline_color = #00000...") |
No edit summary |
||
| Line 8: | Line 8: | ||
| outline_color = #000000AA |
| outline_color = #000000AA |
||
| outline_width = 8 |
| outline_width = 8 |
||
| mainline_color = |
| mainline_color = green |
||
| mainline_width = 6 |
| mainline_width = 6 |
||
}} |
}} |
||
<span class="percentage">{{{percentage|0}}}%</span> |
|||
</div> |
</div> |
||
{{#css: |
|||
.progress-ring > svg { |
|||
stroke-dasharray: 252; /* (2PI * 40px) */ |
|||
stroke-dashoffset: 252; |
|||
animation: offsettozero 0.5s forwards ease-out; |
|||
} |
|||
.progress-ring { |
|||
height: 88px; |
|||
width: 88px; |
|||
} |
|||
.progress-ring .percentage { |
|||
font-family: Lato, sans-serif; |
|||
font-weight: bold; |
|||
font-size: 24px; |
|||
} |
|||
@keyframes offsettozero { |
|||
to { |
|||
stroke-dashoffset: 0; |
|||
} |
|||
} |
|||
}} |
|||
Revision as of 01:27, 9 September 2020
{{#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
}} 0%
