// // Progress animations //
@keyframes progress-bar-stripes {
from { background-position: $spacer-y 0; } to { background-position: 0 0; }
}
// // Basic progress bar //
.progress {
display: block; width: 100%; height: $spacer-y; // todo: make a new var for this margin-bottom: $spacer-y;
} .progress {
// Set overall background background-color: $progress-bg; // Remove Firefox and Opera border border: 0; // Reset the default appearance appearance: none; // Set overall border radius @include border-radius($progress-border-radius);
}
// Filled-in portion of the bar .progress::-ms-fill {
background-color: $progress-bar-color; // Remove right-hand border of value bar from IE10+/Edge border: 0;
} .progress::-moz-progress-bar {
background-color: $progress-bar-color; @include border-left-radius($progress-border-radius);
} .progress::-webkit-progress-value {
background-color: $progress-bar-color; @include border-left-radius($progress-border-radius);
} // Tweaks for full progress bar .progress::-moz-progress-bar {
@include border-right-radius($progress-border-radius);
} .progress::-webkit-progress-value {
@include border-right-radius($progress-border-radius);
}
// Unfilled portion of the bar .progress::-webkit-progress-bar {
background-color: $progress-bg; @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow);
} base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only .progress {
background-color: $progress-bg; @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow);
}
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. @media screen and (min-width:00) {
.progress { background-color: $progress-bg; @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } .progress-bar { display: inline-block; height: $spacer-y; text-indent: -999rem; // Simulate hiding of value as in native `<progress>` background-color: $progress-bar-color; @include border-left-radius($progress-border-radius); } .progress[width="100%"] { @include border-right-radius($progress-border-radius); }
}
// // Striped //
.progress-striped::-webkit-progress-value {
@include gradient-striped(); background-size: $spacer-y $spacer-y;
} .progress-striped::-moz-progress-bar {
@include gradient-striped(); background-size: $spacer-y $spacer-y;
} .progress-striped::-ms-fill {
@include gradient-striped(); background-size: $spacer-y $spacer-y;
} // IE9 @media screen and (min-width:00) {
.progress-bar-striped { @include gradient-striped(); background-size: $spacer-y $spacer-y; }
}
// // Animated //
.progress-animated::-webkit-progress-value {
animation: progress-bar-stripes 2s linear infinite;
} .progress-animated::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite;
} // IE9 @media screen and (min-width:00) {
.progress-animated .progress-bar-striped { animation: progress-bar-stripes 2s linear infinite; }
}
// // Variations //
.progress-success {
@include progress-variant($progress-bar-success-bg);
} .progress-info {
@include progress-variant($progress-bar-info-bg);
} .progress-warning {
@include progress-variant($progress-bar-warning-bg);
} .progress-danger {
@include progress-variant($progress-bar-danger-bg);
}