dev

ProgressBar is a stylesheet that makes a progress bar.

Installation

CSS

HTML

Note: Use <span> 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; }
}

Examples

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%
Text above can be found here (edit)