// // 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);

}