Difference between revisions of "Template:Progress bar"
m (made sure progress bar text doesn't word-wrap) |
m (added a bit of margin so multiple progress bars look nicer) |
||
| Line 12: | Line 12: | ||
</pre> | </pre> | ||
| − | </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:#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 11:24, 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)
