ProgressBar

ProgressBar is a stylesheet that makes a progress bar.
== ==
=== CSS ===
=== HTML ===
Note: Use to display elements inline on mobile devices.
== Customization ==
From the basic CSS snippet, you can customize the ProgressBar with more fancy styling. Add any of the following code preceded by the above CSS.
=== Recolor (flat) ===
[Source]
.progress { color: #fff; }
.progress > .bar { background: #555; }
=== Recolor (gradient) ===
[Source]
.progress { color: #fff; }
.progress > .bar {
 background:
 -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),
 -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
 -webkit-linear-gradient(left, #09c, #f44);
}
=== Round bar ===
[Source]
.round.progress {
 border-radius: 99px;
 overflow: hidden;
}
=== Slim bar ===
[Source]
.progress,
.progress > .bar { height: 6px; }
=== Inset shadow ===
[Source]
.progress { box-shadow: inset 0 1px 5px #aaa; }
=== Animation ===
[Source]
.progress > .bar {
 animation: animate 1s linear infinite;
 background-image: linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .15) 33%, rgba(0,0, 0, .15) 66%, transparent 66%);
 background-size: 40px;
}
@keyframes animate {
 from { background-position: 0; }
 to { background-position: 40px; }
}
== ==
Please refer to MediaWiki:ProgressBar.css to see a complete stylesheet used by the demos below.
A basic progress bar without label
A progress bar without text	15%
A dark progress bar100/200
A fancy progress bar30%
A progress bar with round borders75%
A progress bar with inset shadow45%
A slim progress bar	
An animated progress bar95%