// // Licensed to the Apache Software Foundation (ASF) under one // or more contributor license agreements. See the NOTICE file // distributed with this work for additional information // regarding copyright ownership. The ASF licenses this file // to you under the Apache License, Version 2.0 (the // "License"); you may not use this file except in compliance // with the License. You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, // software distributed under the License is distributed on an // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY // KIND, either express or implied. See the License for the // specific language governing permissions and limitations // under the License. // PROGRESS BARS // ------------- // 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; } } // THE BARS // -------- // Outer container .progress { overflow: hidden; height: 18px; margin-bottom: 18px; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .border-radius(4px); } // Bar of progress .progress .bar { width: 0%; height: 18px; color: @white; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); .transition(width .6s ease); } // Striped bars .progress-striped .bar { #gradient > .striped(#149bdf); .background-size(40px 40px); } // Call animation for the active one .progress.active .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; } // COLORS // ------ // Danger (red) .progress-danger .bar { #gradient > .vertical(#ee5f5b, #c43c35); } .progress-danger.progress-striped .bar { #gradient > .striped(#ee5f5b); } // Success (green) .progress-success .bar { #gradient > .vertical(#62c462, #57a957); } .progress-success.progress-striped .bar { #gradient > .striped(#62c462); } // Info (teal) .progress-info .bar { #gradient > .vertical(#5bc0de, #339bb9); } .progress-info.progress-striped .bar { #gradient > .striped(#5bc0de); } // Warning (orange) .progress-warning .bar { #gradient > .vertical(lighten(@orange, 15%), @orange); } .progress-warning.progress-striped .bar { #gradient > .striped(lighten(@orange, 15%)); }