Difference between revisions of "Template:Progress bar"
m (made sure progress bar text doesn't word-wrap) |
m (added color + category) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 10: | Line 10: | ||
|prefix= (for example, currency symbol) | |prefix= (for example, currency symbol) | ||
|suffix= (for example, units) | |suffix= (for example, units) | ||
| + | |color= (html color code, by defaults to light green) | ||
</pre> | </pre> | ||
| − | + | [[Category:Workaround templates|{{PAGENAME}}]] | |
| − | </noinclude><div style="width:250px;border:1px solid black;border-radius:4px;overflow:hidden;white-space: nowrap;"> | + | </noinclude><div style="width:250px;border:1px solid black;border-radius:4px;margin: 2px;overflow:hidden;white-space: nowrap;"> |
| − | <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:{{{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> | ||
Latest revision as of 10:53, 20 October 2016
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) |color= (html color code, by defaults to light green)
