// // Progress bars // ————————————————–
// ANIMATIONS // ———-
// Webkit @-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; }
}
// Firefox @-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; }
}
// IE9 @-ms-keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; }
}
// Opera @-o-keyframes progress-bar-stripes {
from { background-position: 0 0; } to { background-position: 40px 0; }
}
// Spec @keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; }
}
// THE BARS // ——–
// Outer container .progress {
overflow: hidden; height: @baseLineHeight; margin-bottom: @baseLineHeight; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .border-radius(@baseBorderRadius);
}
// Bar of progress .progress .bar {
width: 0%; height: 100%; color: @white; float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); .transition(width .6s ease);
} .progress .bar + .bar {
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
}
// Striped bars .progress-striped .bar {
#gradient > .striped(#149bdf); .background-size(40px 40px);
}
// Call animation for the active one .progress.active .bar {
-webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
}
// COLORS // ——
// Danger (red) .progress-danger .bar, .progress .bar-danger {
#gradient > .vertical(#ee5f5b, #c43c35);
} .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b);
}
// Success (green) .progress-success .bar, .progress .bar-success {
#gradient > .vertical(#62c462, #57a957);
} .progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462);
}
// Info (teal) .progress-info .bar, .progress .bar-info {
#gradient > .vertical(#5bc0de, #339bb9);
} .progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de);
}
// Warning (orange) .progress-warning .bar, .progress .bar-warning {
#gradient > .vertical(lighten(@orange, 15%), @orange);
} .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(@orange, 15%));
}