1// 2// Progress bars 3// -------------------------------------------------- 4 5 6// ANIMATIONS 7// ---------- 8 9// Webkit 10@-webkit-keyframes progress-bar-stripes { 11 from { background-position: 40px 0; } 12 to { background-position: 0 0; } 13} 14 15// Firefox 16@-moz-keyframes progress-bar-stripes { 17 from { background-position: 40px 0; } 18 to { background-position: 0 0; } 19} 20 21// IE9 22@-ms-keyframes progress-bar-stripes { 23 from { background-position: 40px 0; } 24 to { background-position: 0 0; } 25} 26 27// Opera 28@-o-keyframes progress-bar-stripes { 29 from { background-position: 0 0; } 30 to { background-position: 40px 0; } 31} 32 33// Spec 34@keyframes progress-bar-stripes { 35 from { background-position: 40px 0; } 36 to { background-position: 0 0; } 37} 38 39 40 41// THE BARS 42// -------- 43 44// Outer container 45.progress { 46 overflow: hidden; 47 height: @baseLineHeight; 48 margin-bottom: @baseLineHeight; 49 #gradient > .vertical(#f5f5f5, #f9f9f9); 50 .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 51 .border-radius(@baseBorderRadius); 52} 53 54// Bar of progress 55.progress .bar { 56 width: 0%; 57 height: 100%; 58 color: @white; 59 float: left; 60 font-size: 12px; 61 text-align: center; 62 text-shadow: 0 -1px 0 rgba(0,0,0,.25); 63 #gradient > .vertical(#149bdf, #0480be); 64 .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 65 .box-sizing(border-box); 66 .transition(width .6s ease); 67} 68.progress .bar + .bar { 69 .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); 70} 71 72// Striped bars 73.progress-striped .bar { 74 #gradient > .striped(#149bdf); 75 .background-size(40px 40px); 76} 77 78// Call animation for the active one 79.progress.active .bar { 80 -webkit-animation: progress-bar-stripes 2s linear infinite; 81 -moz-animation: progress-bar-stripes 2s linear infinite; 82 -ms-animation: progress-bar-stripes 2s linear infinite; 83 -o-animation: progress-bar-stripes 2s linear infinite; 84 animation: progress-bar-stripes 2s linear infinite; 85} 86 87 88 89// COLORS 90// ------ 91 92// Danger (red) 93.progress-danger .bar, .progress .bar-danger { 94 #gradient > .vertical(#ee5f5b, #c43c35); 95} 96.progress-danger.progress-striped .bar, .progress-striped .bar-danger { 97 #gradient > .striped(#ee5f5b); 98} 99 100// Success (green) 101.progress-success .bar, .progress .bar-success { 102 #gradient > .vertical(#62c462, #57a957); 103} 104.progress-success.progress-striped .bar, .progress-striped .bar-success { 105 #gradient > .striped(#62c462); 106} 107 108// Info (teal) 109.progress-info .bar, .progress .bar-info { 110 #gradient > .vertical(#5bc0de, #339bb9); 111} 112.progress-info.progress-striped .bar, .progress-striped .bar-info { 113 #gradient > .striped(#5bc0de); 114} 115 116// Warning (orange) 117.progress-warning .bar, .progress .bar-warning { 118 #gradient > .vertical(lighten(@orange, 15%), @orange); 119} 120.progress-warning.progress-striped .bar, .progress-striped .bar-warning { 121 #gradient > .striped(lighten(@orange, 15%)); 122} 123