// 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: 18px; margin-bottom: 18px; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .border-radius(4px); } // Bar of progress .progress .bar {

width: 0;

height: 18px; color: @white; 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); } // 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 { #gradient > .vertical(#ee5f5b, #c43c35); } .progress-danger.progress-striped .bar { #gradient > .striped(#ee5f5b); } // Success (green) .progress-success .bar { #gradient > .vertical(#62c462, #57a957); } .progress-success.progress-striped .bar { #gradient > .striped(#62c462); } // Info (teal) .progress-info .bar { #gradient > .vertical(#5bc0de, #339bb9); } .progress-info.progress-striped .bar { #gradient > .striped(#5bc0de); } // Warning (orange) .progress-warning .bar { #gradient > .vertical(lighten(@orange, 15%), @orange); } .progress-warning.progress-striped .bar { #gradient > .striped(lighten(@orange, 15%)); }