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