@-webkit-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } /* COMMENTED OUT SO LESS COMPILES @-moz-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } */ @keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } .progress { height: 25px; margin-bottom: 18px; overflow: hidden; .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff); #gradient > .vertical(#fff, #f5f5f5); .border-radius(10px); border: 1px solid #ddd; border-color: rgba(0,0,0,.0); &.active { .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } } &.animated { .bar { .transition(width .6s ease); } } &.danger, &.error { .bar { #gradient > .vertical(#ee5f5b, #c43c35); } &.striped { .bar { .background-size(40px, 40px); #gradient > .striped(#ee5f5b); } } } &.success { .bar { #gradient > .vertical(#62c462, #57a957); } &.striped { .bar { .background-size(40px, 40px); #gradient > .striped(#62c462); } } } &.info { .bar { #gradient > .vertical(#5bc0de, #339bb9); } &.striped { .bar { .background-size(40px, 40px); #gradient > .striped(#5bc0de); } } } &.striped { .bar { .background-size(40px, 40px); #gradient > .striped(#62c462); } } .bar { width: 0%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; .gradientBar(#62c462, #57a957); @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25); .box-shadow(@shadow); .border-radius(10px); } }