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