info@54: // info@54: // Progress bars info@54: // -------------------------------------------------- info@54: info@54: info@54: // Bar animations info@54: // ------------------------- info@54: info@54: // WebKit info@54: @-webkit-keyframes progress-bar-stripes { info@54: from { background-position: 40px 0; } info@54: to { background-position: 0 0; } info@54: } info@54: info@54: // Spec and IE10+ info@54: @keyframes progress-bar-stripes { info@54: from { background-position: 40px 0; } info@54: to { background-position: 0 0; } info@54: } info@54: info@54: info@54: info@54: // Bar itself info@54: // ------------------------- info@54: info@54: // Outer container info@54: .progress { info@54: overflow: hidden; info@54: height: @line-height-computed; info@54: margin-bottom: @line-height-computed; info@54: background-color: @progress-bg; info@54: border-radius: @border-radius-base; info@54: .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); info@54: } info@54: info@54: // Bar of progress info@54: .progress-bar { info@54: float: left; info@54: width: 0%; info@54: height: 100%; info@54: font-size: @font-size-small; info@54: line-height: @line-height-computed; info@54: color: @progress-bar-color; info@54: text-align: center; info@54: background-color: @progress-bar-bg; info@54: .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); info@54: .transition(width .6s ease); info@54: } info@54: info@54: // Striped bars info@54: .progress-striped .progress-bar { info@54: #gradient > .striped(); info@54: background-size: 40px 40px; info@54: } info@54: info@54: // Call animation for the active one info@54: .progress.active .progress-bar { info@54: .animation(progress-bar-stripes 2s linear infinite); info@54: } info@54: info@54: info@54: info@54: // Variations info@54: // ------------------------- info@54: info@54: .progress-bar-success { info@54: .progress-bar-variant(@progress-bar-success-bg); info@54: } info@54: info@54: .progress-bar-info { info@54: .progress-bar-variant(@progress-bar-info-bg); info@54: } info@54: info@54: .progress-bar-warning { info@54: .progress-bar-variant(@progress-bar-warning-bg); info@54: } info@54: info@54: .progress-bar-danger { info@54: .progress-bar-variant(@progress-bar-danger-bg); info@54: }