Template:ProgressBar.css

/* Default styling */ .progress { background: #eee; position: relative; } .progress > .bar { display: block; background: #ccc; text-align: right; /* label alignment */ } .progress > .bar:after { content: '\00a0'; /* empty label */ } .progress > .text { position: absolute; left: 5px; }

.progress + .progress { margin-top: 3px; }

/********* CUSTOMIZATION CLASSES *********/

/* dark */ .dark.progress { color: #fff; } .dark.progress > .bar { background: #555; }

/* gradient */ .gradient.progress { color: #fff; } .gradient.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 */ .round.progress { border-radius: 99px; overflow: hidden; }

/* inner/outer */ .inner.progress { box-shadow: inset 0 1px 5px #aaa; } .outer.progress { box-shadow: 0 1px 5px #aaa; }

/* slim */ .slim.progress, .slim.progress > .bar { height: 6px; }

/* animated */ .animated.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; } }