// // Progress bars // -------------------------------------------------- // Bar 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; } } // Bar itself // ------------------------- // Outer container .progress { overflow: hidden; height: @line-height-base; margin-bottom: @line-height-base; background-color: @progress-bg; border-radius: @border-radius-base; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); } // Bar of progress .progress-bar { float: left; width: 0%; height: 100%; font-size: @font-size-small; color: #fff; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-color: @progress-bar-bg; .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .transition(width .6s ease); } // Striped bars .progress-striped .progress-bar { #gradient > .striped(@progress-bar-bg); .background-size(40px 40px); } // Call animation for the active one .progress.active .progress-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; } // Variations // ------------------------- // Danger (red) .progress-bar-danger { background-color: @progress-bar-danger-bg; .progress-striped & { #gradient > .striped(@progress-bar-danger-bg); } } // Success (green) .progress-bar-success { background-color: @progress-bar-success-bg; .progress-striped & { #gradient > .striped(@progress-bar-success-bg); } } // Warning (orange) .progress-bar-warning { background-color: @progress-bar-warning-bg; .progress-striped & { #gradient > .striped(@progress-bar-warning-bg); } } // Info (teal) .progress-bar-info { background-color: @progress-bar-info-bg; .progress-striped & { #gradient > .striped(@progress-bar-info-bg); } }