Difference between revisions of "Template:Progress bar"
(created progress bar template (from 3D printer)) |
(added help (somewhat)) |
||
| Line 1: | Line 1: | ||
| − | <div style="width:250px;border:1px solid black;border-radius:4px;overflow:hidden"> | + | <noinclude>Draw a fancy progress bar. |
| + | |||
| + | Usage: | ||
| + | <pre><nowiki> | ||
| + | {{Progress bar|percentage}} | ||
| + | </nowiki></pre> | ||
| + | optional parameters are: | ||
| + | <pre> | ||
| + | |total=numeric value (percentage will be calculated accordingly) | ||
| + | |prefix= (for example, currency symbol) | ||
| + | |suffix= (for example, units) | ||
| + | </pre> | ||
| + | |||
| + | </noinclude><div style="width:250px;border:1px solid black;border-radius:4px;overflow:hidden"> | ||
<div style="background-color:#ac0;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,.2)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.2)),color-stop(.75,rgba(255,255,255,.2)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%, transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);-webkit-background-size:50px 50px;-moz-background-size:50px 50px;background-size:50px 50px;line-height:2em;font-weight:bold;padding-left:5px;width:{{#expr: {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}} * 100}}%;">{{{prefix|}}}{{{1|<noinclude>2</noinclude>0}}}{{{suffix|%}}}</div> | <div style="background-color:#ac0;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,.2)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.2)),color-stop(.75,rgba(255,255,255,.2)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%, transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);-webkit-background-size:50px 50px;-moz-background-size:50px 50px;background-size:50px 50px;line-height:2em;font-weight:bold;padding-left:5px;width:{{#expr: {{{1|<noinclude>2</noinclude>0}}} / {{{total|100}}} * 100}}%;">{{{prefix|}}}{{{1|<noinclude>2</noinclude>0}}}{{{suffix|%}}}</div> | ||
</div> | </div> | ||
Revision as of 12:14, 19 November 2015
Draw a fancy progress bar.
Usage:
{{Progress bar|percentage}}
optional parameters are:
|total=numeric value (percentage will be calculated accordingly) |prefix= (for example, currency symbol) |suffix= (for example, units)
