/* Progress bars ======================================== */ /* ANIMATIONS */ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } /* THE BARS */ /* Outer container */ .progress { overflow: hidden; height: var(--base-line-height); margin-bottom: var(--base-line-height); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); border-radius: var(--base-border-radius); } /* Bar of progress */ .progress .bar { width: 0%; height: 100%; color: var(--white); float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-image: linear-gradient(to bottom, #149bdf, #0480be); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-sizing: border-box; transition: width .6s ease; } .progress .bar + .bar { box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); } /* Striped bars */ .progress-striped .bar { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } /* Call animation for the active one */ .progress.active .bar { animation: progress-bar-stripes 2s linear infinite; } /* COLORS */ /* Danger (red) */ .progress-danger .bar, .progress .bar-danger { background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /* Success (green) */ .progress-success .bar, .progress .bar-success { background-image: linear-gradient(to bottom, #62c462, #57a957); } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /* Info (teal) */ .progress-info .bar, .progress .bar-info { background-image: linear-gradient(to bottom, #5bc0de, #339bb9); } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /* Warning (orange) */ .progress-warning .bar, .progress .bar-warning { background-image: linear-gradient(to bottom, #fbb450, var(--orange)); } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }