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